@royaloperahouse/harmonic 0.1.7 → 0.1.8-b
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.md +252 -43
- 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/index.d.ts +3 -3
- package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +1 -1
- package/dist/components/molecules/Information/Information.style.d.ts +4 -10
- package/dist/components/molecules/Information/utils.d.ts +10 -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 +12 -0
- package/dist/components/molecules/Swipe/Swipe.style.d.ts +8 -0
- package/dist/components/molecules/Swipe/helper.d.ts +1 -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 +24 -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/index.d.ts +4 -1
- package/dist/harmonic.cjs.development.css +71 -31
- package/dist/harmonic.cjs.development.js +1107 -550
- 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 +1120 -565
- package/dist/harmonic.esm.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/types/buttonTypes.d.ts +6 -2
- package/dist/types/carousel.d.ts +64 -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 +2 -2
- package/dist/types/information.d.ts +11 -37
- package/dist/types/progress.d.ts +4 -0
- package/dist/types/types.d.ts +5 -1
- package/dist/types/typography.d.ts +11 -5
- package/package.json +2 -1
- package/README.GIT +0 -278
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 && svg path {\n fill: ", ";\n }\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n\n && svg path {\n fill: ", ";\n }\n }\n\n && span svg * {\n fill: ", ";\n }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents,
|
|
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 && svg path {\n fill: ", ";\n }\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n\n && svg path {\n fill: ", ";\n }\n }\n\n && span svg * {\n fill: ", ";\n }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, getTextColor, getHoveredColor, getHoveredColor, getTextColor, getPressedColor, getPressedColor, getTextColor, 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())));
|
|
@@ -4204,7 +4324,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4204
4324
|
};
|
|
4205
4325
|
|
|
4206
4326
|
var _templateObject$p, _templateObject2$h;
|
|
4207
|
-
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) {
|
|
4208
4328
|
var iconName = _ref.iconName;
|
|
4209
4329
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
|
|
4210
4330
|
}, function (_ref2) {
|
|
@@ -4213,23 +4333,23 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObjec
|
|
|
4213
4333
|
}, devices.mobile);
|
|
4214
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"])));
|
|
4215
4335
|
|
|
4216
|
-
var _excluded$b = ["children", "iconName", "iconDirection", "
|
|
4336
|
+
var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
|
|
4217
4337
|
var TextLink = function TextLink(_ref) {
|
|
4218
4338
|
var children = _ref.children,
|
|
4219
4339
|
iconName = _ref.iconName,
|
|
4220
4340
|
iconDirection = _ref.iconDirection,
|
|
4221
|
-
|
|
4341
|
+
textColor = _ref.textColor,
|
|
4222
4342
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
4223
4343
|
var truncatedString = children.substring(0, 30);
|
|
4224
4344
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
4225
|
-
color:
|
|
4345
|
+
color: textColor,
|
|
4226
4346
|
iconName: iconName
|
|
4227
4347
|
}, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
|
|
4228
4348
|
"data-testid": "text-link-icon"
|
|
4229
4349
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4230
4350
|
iconName: iconName,
|
|
4231
4351
|
direction: iconDirection,
|
|
4232
|
-
color:
|
|
4352
|
+
color: textColor
|
|
4233
4353
|
}))) : null);
|
|
4234
4354
|
};
|
|
4235
4355
|
|
|
@@ -4475,18 +4595,21 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
|
|
|
4475
4595
|
var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
|
|
4476
4596
|
|
|
4477
4597
|
var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4478
|
-
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) {
|
|
4479
4599
|
var color = _ref.color;
|
|
4480
4600
|
return color;
|
|
4481
|
-
})
|
|
4482
|
-
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) {
|
|
4483
4602
|
var color = _ref2.color;
|
|
4484
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;
|
|
4485
4608
|
}, devices.mobileAndTablet);
|
|
4486
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);
|
|
4487
|
-
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4488
|
-
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
4489
|
-
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);
|
|
4490
4613
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4491
4614
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4492
4615
|
|
|
@@ -4519,9 +4642,17 @@ var Timer = function Timer(_ref) {
|
|
|
4519
4642
|
}
|
|
4520
4643
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
|
|
4521
4644
|
className: "harmonic-timer-value"
|
|
4522
|
-
},
|
|
4645
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
4646
|
+
hierarchy: "h3",
|
|
4647
|
+
size: "medium"
|
|
4648
|
+
}, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
|
|
4523
4649
|
className: "harmonic-timer-label"
|
|
4524
|
-
},
|
|
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, ":"))));
|
|
4525
4656
|
};
|
|
4526
4657
|
React__default.useEffect(function () {
|
|
4527
4658
|
if (isEndDateReached) return undefined;
|
|
@@ -4561,8 +4692,8 @@ var Timer = function Timer(_ref) {
|
|
|
4561
4692
|
color: color
|
|
4562
4693
|
}, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
|
|
4563
4694
|
className: "harmonic-timer-title-wrapper"
|
|
4564
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
4565
|
-
|
|
4695
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
|
|
4696
|
+
size: "large"
|
|
4566
4697
|
}, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
|
|
4567
4698
|
className: "harmonic-timer-values-wrapper"
|
|
4568
4699
|
}, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
|
|
@@ -4573,16 +4704,16 @@ var Timer = function Timer(_ref) {
|
|
|
4573
4704
|
};
|
|
4574
4705
|
|
|
4575
4706
|
var _templateObject$t;
|
|
4576
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n
|
|
4707
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
|
|
4577
4708
|
|
|
4578
4709
|
var TypeTags = function TypeTags(_ref) {
|
|
4579
4710
|
var list = _ref.list;
|
|
4580
4711
|
return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
|
|
4581
|
-
return /*#__PURE__*/React__default.createElement(
|
|
4582
|
-
level: 1,
|
|
4583
|
-
tag: "li",
|
|
4712
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
4584
4713
|
key: t
|
|
4585
|
-
},
|
|
4714
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
4715
|
+
size: "large"
|
|
4716
|
+
}, t));
|
|
4586
4717
|
}));
|
|
4587
4718
|
};
|
|
4588
4719
|
|
|
@@ -6276,7 +6407,7 @@ var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObj
|
|
|
6276
6407
|
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);
|
|
6277
6408
|
|
|
6278
6409
|
var _excluded$f = ["text"],
|
|
6279
|
-
_excluded2 = ["text"];
|
|
6410
|
+
_excluded2$1 = ["text"];
|
|
6280
6411
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
6281
6412
|
var title = _ref.title,
|
|
6282
6413
|
links = _ref.links,
|
|
@@ -6288,7 +6419,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6288
6419
|
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
|
|
6289
6420
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
6290
6421
|
secondaryButtonText = _ref3.text,
|
|
6291
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
6422
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
|
|
6292
6423
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
6293
6424
|
sticky: sticky
|
|
6294
6425
|
}, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
|
|
@@ -6903,7 +7034,7 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
6903
7034
|
})));
|
|
6904
7035
|
};
|
|
6905
7036
|
|
|
6906
|
-
|
|
7037
|
+
/* eslint-disable no-shadow */
|
|
6907
7038
|
var CarouselType;
|
|
6908
7039
|
(function (CarouselType) {
|
|
6909
7040
|
CarouselType["Image"] = "image";
|
|
@@ -6919,32 +7050,6 @@ var ButtonType;
|
|
|
6919
7050
|
ButtonType["Tertiary"] = "Tertiary";
|
|
6920
7051
|
})(ButtonType || (ButtonType = {}));
|
|
6921
7052
|
|
|
6922
|
-
var IInformationCtaVariant;
|
|
6923
|
-
(function (IInformationCtaVariant) {
|
|
6924
|
-
IInformationCtaVariant["Primary"] = "Primary";
|
|
6925
|
-
IInformationCtaVariant["Secondary"] = "Secondary";
|
|
6926
|
-
IInformationCtaVariant["Tertiary"] = "Tertiary";
|
|
6927
|
-
IInformationCtaVariant["TextLink"] = "TextLink";
|
|
6928
|
-
})(IInformationCtaVariant || (IInformationCtaVariant = {}));
|
|
6929
|
-
var IInformationCtaTheme;
|
|
6930
|
-
(function (IInformationCtaTheme) {
|
|
6931
|
-
IInformationCtaTheme["Cinema"] = "Cinema";
|
|
6932
|
-
IInformationCtaTheme["Core"] = "Core";
|
|
6933
|
-
IInformationCtaTheme["Stream"] = "Stream";
|
|
6934
|
-
})(IInformationCtaTheme || (IInformationCtaTheme = {}));
|
|
6935
|
-
var IInformationTitleVariant;
|
|
6936
|
-
(function (IInformationTitleVariant) {
|
|
6937
|
-
IInformationTitleVariant["Header"] = "Header";
|
|
6938
|
-
IInformationTitleVariant["AltHeader"] = "AltHeader";
|
|
6939
|
-
})(IInformationTitleVariant || (IInformationTitleVariant = {}));
|
|
6940
|
-
var IInformationBackgroundColour;
|
|
6941
|
-
(function (IInformationBackgroundColour) {
|
|
6942
|
-
IInformationBackgroundColour["Cinema"] = "cinema";
|
|
6943
|
-
IInformationBackgroundColour["Core"] = "core";
|
|
6944
|
-
IInformationBackgroundColour["Stream"] = "stream";
|
|
6945
|
-
IInformationBackgroundColour["White"] = "white";
|
|
6946
|
-
})(IInformationBackgroundColour || (IInformationBackgroundColour = {}));
|
|
6947
|
-
|
|
6948
7053
|
var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
|
|
6949
7054
|
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);
|
|
6950
7055
|
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"])));
|
|
@@ -7233,9 +7338,316 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
7233
7338
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
7234
7339
|
};
|
|
7235
7340
|
|
|
7236
|
-
var _templateObject$N, _templateObject2$A
|
|
7237
|
-
var
|
|
7238
|
-
var
|
|
7341
|
+
var _templateObject$N, _templateObject2$A;
|
|
7342
|
+
var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
|
|
7343
|
+
var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
|
|
7344
|
+
var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", "px);\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (props) {
|
|
7345
|
+
return props.transitioning ? 'transform 0.3s ease-in-out' : 'none';
|
|
7346
|
+
}, function (props) {
|
|
7347
|
+
return props.translateX;
|
|
7348
|
+
}, SWIPE_SLIDE_CLASS_NAME);
|
|
7349
|
+
|
|
7350
|
+
/**
|
|
7351
|
+
* Generates a random string in the format XXX-XXX.
|
|
7352
|
+
* Does not meet UUID standards.
|
|
7353
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
7354
|
+
*
|
|
7355
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
7356
|
+
*/
|
|
7357
|
+
var generateDomElementId = function generateDomElementId() {
|
|
7358
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
7359
|
+
var datePart = Date.now().toString().slice(-3);
|
|
7360
|
+
return randomPart + "-" + datePart;
|
|
7361
|
+
};
|
|
7362
|
+
|
|
7363
|
+
var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
|
|
7364
|
+
var widthSoFar = 0;
|
|
7365
|
+
var visible = [];
|
|
7366
|
+
for (var i = currentIndex; i < slidesLength; i++) {
|
|
7367
|
+
var _slideWidths$i;
|
|
7368
|
+
var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
|
|
7369
|
+
if (widthSoFar + width > containerWidth) break;
|
|
7370
|
+
visible.push(i);
|
|
7371
|
+
widthSoFar += width;
|
|
7372
|
+
}
|
|
7373
|
+
return visible;
|
|
7374
|
+
};
|
|
7375
|
+
|
|
7376
|
+
var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore"];
|
|
7377
|
+
var MAX_CLONES_NUMBER = 6;
|
|
7378
|
+
var getClonesCount = function getClonesCount(infinite, childrenLength) {
|
|
7379
|
+
if (!infinite) return 0;
|
|
7380
|
+
if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
|
|
7381
|
+
return childrenLength;
|
|
7382
|
+
};
|
|
7383
|
+
var getSlidedWidth = function getSlidedWidth(slide) {
|
|
7384
|
+
if (!slide) return 0;
|
|
7385
|
+
var style = window.getComputedStyle(slide);
|
|
7386
|
+
var marginLeft = parseFloat(style.marginLeft) || 0;
|
|
7387
|
+
var marginRight = parseFloat(style.marginRight) || 0;
|
|
7388
|
+
return slide.getBoundingClientRect().width + marginLeft + marginRight;
|
|
7389
|
+
};
|
|
7390
|
+
var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
7391
|
+
var children = _ref.children,
|
|
7392
|
+
_ref$infinite = _ref.infinite,
|
|
7393
|
+
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
|
|
7394
|
+
onIndexChange = _ref.onIndexChange,
|
|
7395
|
+
_ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
|
|
7396
|
+
slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
|
|
7397
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
7398
|
+
var containerRef = useRef(null);
|
|
7399
|
+
var childRefs = useRef([]);
|
|
7400
|
+
var startX = useRef(0);
|
|
7401
|
+
var currentTranslate = useRef(0);
|
|
7402
|
+
var isDragging = useRef(false);
|
|
7403
|
+
var uniqueIdRef = useRef(generateDomElementId());
|
|
7404
|
+
var _useMemo = useMemo(function () {
|
|
7405
|
+
var count = getClonesCount(infinite, children.length);
|
|
7406
|
+
var leftClones = infinite ? children.slice(-count) : [];
|
|
7407
|
+
var rightClones = infinite ? children.slice(0, count) : [];
|
|
7408
|
+
var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
|
|
7409
|
+
return {
|
|
7410
|
+
slides: allSlides,
|
|
7411
|
+
clonesCount: count
|
|
7412
|
+
};
|
|
7413
|
+
}, [children, infinite]),
|
|
7414
|
+
slides = _useMemo.slides,
|
|
7415
|
+
clonesCount = _useMemo.clonesCount;
|
|
7416
|
+
// Set the initial index to clonesCount (so the first real slide is shown)
|
|
7417
|
+
var _useState = useState(infinite ? clonesCount : 0),
|
|
7418
|
+
currentIndex = _useState[0],
|
|
7419
|
+
setCurrentIndex = _useState[1];
|
|
7420
|
+
var _useState2 = useState(false),
|
|
7421
|
+
transitioning = _useState2[0],
|
|
7422
|
+
setTransitioning = _useState2[1];
|
|
7423
|
+
var _useState3 = useState([]),
|
|
7424
|
+
slideWidths = _useState3[0],
|
|
7425
|
+
setSlideWidths = _useState3[1];
|
|
7426
|
+
var _useState4 = useState(0),
|
|
7427
|
+
containerWidth = _useState4[0],
|
|
7428
|
+
setContainerWidth = _useState4[1];
|
|
7429
|
+
useEffect(function () {
|
|
7430
|
+
if (!onIndexChange) return;
|
|
7431
|
+
if (!infinite) {
|
|
7432
|
+
onIndexChange(currentIndex);
|
|
7433
|
+
return;
|
|
7434
|
+
}
|
|
7435
|
+
var offset = currentIndex - clonesCount + children.length;
|
|
7436
|
+
var realIndex = offset % children.length;
|
|
7437
|
+
onIndexChange(realIndex);
|
|
7438
|
+
}, [currentIndex, onIndexChange, infinite, children.length]);
|
|
7439
|
+
// Update dimensions
|
|
7440
|
+
var updateDimensions = useCallback(function () {
|
|
7441
|
+
if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
|
|
7442
|
+
if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
|
|
7443
|
+
}, []);
|
|
7444
|
+
useEffect(function () {
|
|
7445
|
+
var animationFrameRequestId = requestAnimationFrame(function () {
|
|
7446
|
+
updateDimensions();
|
|
7447
|
+
});
|
|
7448
|
+
return function () {
|
|
7449
|
+
cancelAnimationFrame(animationFrameRequestId);
|
|
7450
|
+
};
|
|
7451
|
+
}, [children]);
|
|
7452
|
+
useEffect(function () {
|
|
7453
|
+
var observer = new ResizeObserver(updateDimensions);
|
|
7454
|
+
if (containerRef.current) observer.observe(containerRef.current);
|
|
7455
|
+
return function () {
|
|
7456
|
+
observer.disconnect();
|
|
7457
|
+
};
|
|
7458
|
+
}, [children]);
|
|
7459
|
+
// Compute current translate X value by summing widths of all slides before currentIndex.
|
|
7460
|
+
var getTranslateX = function getTranslateX() {
|
|
7461
|
+
var slideOffset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
|
|
7462
|
+
return acc + width;
|
|
7463
|
+
}, 0);
|
|
7464
|
+
return slideOffset + (slidesOffsetBefore || 0); // Apply offsetBefore
|
|
7465
|
+
};
|
|
7466
|
+
var canMoveNext = function canMoveNext() {
|
|
7467
|
+
var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
|
|
7468
|
+
return acc + width;
|
|
7469
|
+
}, 0);
|
|
7470
|
+
// In non-infinite mode, only move if there is more to show
|
|
7471
|
+
return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
|
|
7472
|
+
};
|
|
7473
|
+
var handleTransitionEnd = function handleTransitionEnd() {
|
|
7474
|
+
setTransitioning(false); // Reset transitioning after animation ends
|
|
7475
|
+
if (!infinite) return;
|
|
7476
|
+
if (currentIndex >= children.length + clonesCount) {
|
|
7477
|
+
setCurrentIndex(clonesCount);
|
|
7478
|
+
} else if (currentIndex < clonesCount) {
|
|
7479
|
+
setCurrentIndex(children.length + currentIndex);
|
|
7480
|
+
}
|
|
7481
|
+
};
|
|
7482
|
+
var goToPrev = function goToPrev() {
|
|
7483
|
+
if (transitioning) return; // Prevent clicks during transition
|
|
7484
|
+
if (currentIndex === 0 && !infinite) {
|
|
7485
|
+
setTransitioning(false); // Reset immediately if no more slides
|
|
7486
|
+
return;
|
|
7487
|
+
}
|
|
7488
|
+
setTransitioning(true);
|
|
7489
|
+
setCurrentIndex(function (prev) {
|
|
7490
|
+
return infinite ? prev - 1 : Math.max(0, prev - 1);
|
|
7491
|
+
});
|
|
7492
|
+
};
|
|
7493
|
+
var goToNext = function goToNext() {
|
|
7494
|
+
if (transitioning || !canMoveNext()) return; // Prevent clicks during transition
|
|
7495
|
+
if (currentIndex === children.length - 1 && !infinite) {
|
|
7496
|
+
setTransitioning(false); // Reset immediately if no more slides
|
|
7497
|
+
return;
|
|
7498
|
+
}
|
|
7499
|
+
setTransitioning(true);
|
|
7500
|
+
setCurrentIndex(function (prev) {
|
|
7501
|
+
return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
|
|
7502
|
+
});
|
|
7503
|
+
};
|
|
7504
|
+
useImperativeHandle(ref, function () {
|
|
7505
|
+
return {
|
|
7506
|
+
nextSlide: goToNext,
|
|
7507
|
+
prevSlide: goToPrev
|
|
7508
|
+
};
|
|
7509
|
+
});
|
|
7510
|
+
var handleTouchStart = function handleTouchStart(e) {
|
|
7511
|
+
startX.current = e.touches[0].clientX;
|
|
7512
|
+
isDragging.current = true;
|
|
7513
|
+
setTransitioning(false);
|
|
7514
|
+
};
|
|
7515
|
+
var handleTouchMove = function handleTouchMove(e) {
|
|
7516
|
+
if (!isDragging.current) return;
|
|
7517
|
+
var deltaX = e.touches[0].clientX - startX.current;
|
|
7518
|
+
currentTranslate.current = getTranslateX() + deltaX;
|
|
7519
|
+
};
|
|
7520
|
+
var handleTouchEnd = function handleTouchEnd() {
|
|
7521
|
+
isDragging.current = false;
|
|
7522
|
+
setTransitioning(true);
|
|
7523
|
+
if (currentTranslate.current > getTranslateX()) {
|
|
7524
|
+
goToPrev();
|
|
7525
|
+
} else if (currentTranslate.current < getTranslateX()) {
|
|
7526
|
+
goToNext();
|
|
7527
|
+
}
|
|
7528
|
+
};
|
|
7529
|
+
var onSlideFocus = function onSlideFocus(isVisible, index) {
|
|
7530
|
+
if (!isVisible) setCurrentIndex(index);
|
|
7531
|
+
};
|
|
7532
|
+
var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
|
|
7533
|
+
return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
|
|
7534
|
+
ref: containerRef,
|
|
7535
|
+
onTouchStart: handleTouchStart,
|
|
7536
|
+
onTouchMove: handleTouchMove,
|
|
7537
|
+
onTouchEnd: handleTouchEnd,
|
|
7538
|
+
className: "swipe"
|
|
7539
|
+
}, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
|
|
7540
|
+
className: "swipe-track-wrapper",
|
|
7541
|
+
translateX: getTranslateX(),
|
|
7542
|
+
transitioning: transitioning,
|
|
7543
|
+
onTransitionEnd: handleTransitionEnd
|
|
7544
|
+
}, slides.map(function (child, index) {
|
|
7545
|
+
var isVisible = visibleIndexes.includes(index);
|
|
7546
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
7547
|
+
key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
|
|
7548
|
+
ariaHidden: !isVisible,
|
|
7549
|
+
className: SWIPE_SLIDE_CLASS_NAME,
|
|
7550
|
+
ref: function ref(el) {
|
|
7551
|
+
childRefs.current[index] = el;
|
|
7552
|
+
},
|
|
7553
|
+
onFocus: function onFocus() {
|
|
7554
|
+
return onSlideFocus(isVisible, index);
|
|
7555
|
+
}
|
|
7556
|
+
});
|
|
7557
|
+
})));
|
|
7558
|
+
});
|
|
7559
|
+
Swipe.displayName = 'Swipe';
|
|
7560
|
+
|
|
7561
|
+
var COLORS$3 = {
|
|
7562
|
+
"default": 'var(--button-auxiliary-color)',
|
|
7563
|
+
background: 'var(--button-auxiliary-bg-color)'
|
|
7564
|
+
};
|
|
7565
|
+
var getTextColor$3 = function getTextColor(_ref) {
|
|
7566
|
+
var textColor = _ref.textColor;
|
|
7567
|
+
return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
|
|
7568
|
+
};
|
|
7569
|
+
var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
7570
|
+
var backgroundColor = _ref2.backgroundColor;
|
|
7571
|
+
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
7572
|
+
};
|
|
7573
|
+
|
|
7574
|
+
var _templateObject$O;
|
|
7575
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$O || (_templateObject$O = /*#__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);
|
|
7576
|
+
|
|
7577
|
+
var _excluded$i = ["children", "className"];
|
|
7578
|
+
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
7579
|
+
var children = _ref.children,
|
|
7580
|
+
className = _ref.className,
|
|
7581
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
|
|
7582
|
+
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
7583
|
+
iconClassName: "auxiliaryButtonIcon",
|
|
7584
|
+
className: className
|
|
7585
|
+
}), children);
|
|
7586
|
+
};
|
|
7587
|
+
|
|
7588
|
+
var _buttonTypeToButton;
|
|
7589
|
+
var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
|
|
7590
|
+
|
|
7591
|
+
var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
|
|
7592
|
+
return htmlString.replace(/<[^>]*>/g, '');
|
|
7593
|
+
};
|
|
7594
|
+
var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
|
|
7595
|
+
if (addDots === void 0) {
|
|
7596
|
+
addDots = false;
|
|
7597
|
+
}
|
|
7598
|
+
var textContent = stripAllHtmlTags(htmlString);
|
|
7599
|
+
if (textContent.length <= resultLength) {
|
|
7600
|
+
return htmlString;
|
|
7601
|
+
}
|
|
7602
|
+
var accumulatedText = '';
|
|
7603
|
+
var tagStack = [];
|
|
7604
|
+
var charCount = 0;
|
|
7605
|
+
var closeTags = function closeTags() {
|
|
7606
|
+
while (tagStack.length > 0) {
|
|
7607
|
+
accumulatedText += "</" + tagStack.pop() + ">";
|
|
7608
|
+
}
|
|
7609
|
+
};
|
|
7610
|
+
for (var i = 0; i < htmlString.length; i++) {
|
|
7611
|
+
var _char = htmlString[i];
|
|
7612
|
+
if (_char === '<') {
|
|
7613
|
+
accumulatedText += _char;
|
|
7614
|
+
if (htmlString[i + 1] !== '/') {
|
|
7615
|
+
var tagNameEnd = htmlString.indexOf('>', i);
|
|
7616
|
+
var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
|
|
7617
|
+
tagStack.push(tagName);
|
|
7618
|
+
accumulatedText += tagName + ">";
|
|
7619
|
+
i = tagNameEnd;
|
|
7620
|
+
}
|
|
7621
|
+
} else if (_char === '>') {
|
|
7622
|
+
accumulatedText += _char;
|
|
7623
|
+
} else if (charCount < resultLength) {
|
|
7624
|
+
accumulatedText += _char;
|
|
7625
|
+
charCount++;
|
|
7626
|
+
}
|
|
7627
|
+
if (charCount >= resultLength) {
|
|
7628
|
+
if (addDots) {
|
|
7629
|
+
accumulatedText += '...';
|
|
7630
|
+
}
|
|
7631
|
+
break;
|
|
7632
|
+
}
|
|
7633
|
+
}
|
|
7634
|
+
closeTags();
|
|
7635
|
+
return accumulatedText;
|
|
7636
|
+
};
|
|
7637
|
+
var truncate = function truncate(str, n) {
|
|
7638
|
+
return str.length >= n ? str.substring(0, n) : str;
|
|
7639
|
+
};
|
|
7640
|
+
var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
|
|
7641
|
+
if (addDots === void 0) {
|
|
7642
|
+
addDots = false;
|
|
7643
|
+
}
|
|
7644
|
+
var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
|
|
7645
|
+
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
7646
|
+
};
|
|
7647
|
+
|
|
7648
|
+
var _templateObject$P, _templateObject2$B, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c;
|
|
7649
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
7650
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
|
|
7239
7651
|
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__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) {
|
|
7240
7652
|
var isVisible = _ref.isVisible;
|
|
7241
7653
|
return isVisible ? 'visible' : 'hidden';
|
|
@@ -7350,8 +7762,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
7350
7762
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
7351
7763
|
};
|
|
7352
7764
|
|
|
7353
|
-
var _templateObject$
|
|
7354
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7765
|
+
var _templateObject$Q;
|
|
7766
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
7355
7767
|
|
|
7356
7768
|
var Accordions = function Accordions(_ref) {
|
|
7357
7769
|
var _ref$items = _ref.items,
|
|
@@ -7372,9 +7784,9 @@ var Accordions = function Accordions(_ref) {
|
|
|
7372
7784
|
}));
|
|
7373
7785
|
};
|
|
7374
7786
|
|
|
7375
|
-
var _templateObject$
|
|
7376
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7377
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7787
|
+
var _templateObject$R, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f;
|
|
7788
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__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);
|
|
7789
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__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) {
|
|
7378
7790
|
var isClickable = _ref.isClickable;
|
|
7379
7791
|
return isClickable ? 'pointer' : 'default';
|
|
7380
7792
|
}, function (_ref2) {
|
|
@@ -7455,109 +7867,76 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7455
7867
|
}))))));
|
|
7456
7868
|
};
|
|
7457
7869
|
|
|
7458
|
-
var
|
|
7459
|
-
"default": 'var(--button-auxiliary-color)',
|
|
7460
|
-
background: 'var(--button-auxiliary-bg-color)'
|
|
7461
|
-
};
|
|
7462
|
-
var getTextColor$2 = function getTextColor(_ref) {
|
|
7463
|
-
var textColor = _ref.textColor;
|
|
7464
|
-
return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
|
|
7465
|
-
};
|
|
7466
|
-
var getBackgroundColor$2 = function getBackgroundColor(_ref2) {
|
|
7467
|
-
var backgroundColor = _ref2.backgroundColor;
|
|
7468
|
-
return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
|
|
7469
|
-
};
|
|
7470
|
-
|
|
7471
|
-
var _templateObject$Q;
|
|
7472
|
-
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);
|
|
7473
|
-
|
|
7474
|
-
var _excluded$h = ["children", "className"];
|
|
7475
|
-
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
7476
|
-
var children = _ref.children,
|
|
7477
|
-
className = _ref.className,
|
|
7478
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
|
|
7479
|
-
return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
|
|
7480
|
-
iconClassName: "auxiliaryButtonIcon",
|
|
7481
|
-
className: className
|
|
7482
|
-
}), children);
|
|
7483
|
-
};
|
|
7484
|
-
|
|
7485
|
-
var _templateObject$R, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
|
|
7870
|
+
var _templateObject$S, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
|
|
7486
7871
|
var LENGTH_LARGE_TEXT = 28;
|
|
7487
7872
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7488
7873
|
var LENGTH_TEXT_TABLET = 10;
|
|
7489
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7874
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
7490
7875
|
var isCardClickable = _ref.isCardClickable;
|
|
7491
7876
|
return isCardClickable ? 'pointer' : 'default';
|
|
7492
7877
|
}, function (_ref2) {
|
|
7493
7878
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7494
7879
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7495
7880
|
});
|
|
7496
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
7497
|
-
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7501
|
-
}, zIndexes.contentOverlay);
|
|
7502
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7503
|
-
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) {
|
|
7504
|
-
var fullWidth = _ref4.fullWidth;
|
|
7881
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
|
|
7882
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
|
|
7883
|
+
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__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) {
|
|
7884
|
+
var fullWidth = _ref3.fullWidth;
|
|
7505
7885
|
return fullWidth ? '0' : '20px';
|
|
7506
|
-
}, function (
|
|
7507
|
-
var fullWidth =
|
|
7886
|
+
}, function (_ref4) {
|
|
7887
|
+
var fullWidth = _ref4.fullWidth;
|
|
7508
7888
|
return fullWidth ? '0' : '20px';
|
|
7509
7889
|
});
|
|
7510
|
-
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin:
|
|
7511
|
-
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin:
|
|
7512
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
7513
|
-
var HighlightTextContainer = /*#__PURE__*/styled(
|
|
7514
|
-
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
7515
|
-
var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height:
|
|
7516
|
-
var isVisible =
|
|
7890
|
+
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7891
|
+
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7892
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
|
|
7893
|
+
var HighlightTextContainer = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
|
|
7894
|
+
var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
|
|
7895
|
+
var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 26px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref5) {
|
|
7896
|
+
var isVisible = _ref5.isVisible;
|
|
7517
7897
|
return isVisible ? "visible" : 'hidden';
|
|
7518
|
-
}, devices.mobile, function (
|
|
7519
|
-
var isGridCard =
|
|
7898
|
+
}, devices.mobile, function (_ref6) {
|
|
7899
|
+
var isGridCard = _ref6.isGridCard;
|
|
7520
7900
|
return isGridCard ? '20px' : '0';
|
|
7521
7901
|
});
|
|
7522
|
-
var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top:
|
|
7523
|
-
var fullWidth =
|
|
7902
|
+
var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 26px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref7) {
|
|
7903
|
+
var fullWidth = _ref7.fullWidth;
|
|
7524
7904
|
return fullWidth ? '0' : '20px';
|
|
7525
|
-
}, function (
|
|
7526
|
-
var fullWidth =
|
|
7905
|
+
}, function (_ref8) {
|
|
7906
|
+
var fullWidth = _ref8.fullWidth;
|
|
7527
7907
|
return fullWidth ? '0' : '20px';
|
|
7528
7908
|
});
|
|
7529
|
-
var LabelElements = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height:
|
|
7530
|
-
var bgColor =
|
|
7531
|
-
|
|
7532
|
-
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
|
|
7909
|
+
var LabelElements = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 26px;\n padding: 0 8px;\n background-color: ", ";\n"])), function (_ref9) {
|
|
7910
|
+
var bgColor = _ref9.bgColor;
|
|
7911
|
+
return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
|
|
7533
7912
|
});
|
|
7534
7913
|
var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
|
|
7535
|
-
var getButtonsOpacity = function getButtonsOpacity(
|
|
7536
|
-
var onlyShowButtonsOnHover =
|
|
7914
|
+
var getButtonsOpacity = function getButtonsOpacity(_ref10) {
|
|
7915
|
+
var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
|
|
7537
7916
|
return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
|
|
7538
7917
|
};
|
|
7539
|
-
var getButtonsMinHeight = function getButtonsMinHeight(
|
|
7540
|
-
var onlyShowButtonsOnHover =
|
|
7918
|
+
var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
|
|
7919
|
+
var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
|
|
7541
7920
|
return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
|
|
7542
7921
|
};
|
|
7543
|
-
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap:
|
|
7544
|
-
var size =
|
|
7545
|
-
primaryButtonTextLength =
|
|
7546
|
-
tertiaryButtonTextLength =
|
|
7922
|
+
var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$1 = /*#__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) {
|
|
7923
|
+
var size = _ref12.size,
|
|
7924
|
+
primaryButtonTextLength = _ref12.primaryButtonTextLength,
|
|
7925
|
+
tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
|
|
7547
7926
|
var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
|
|
7548
7927
|
if (isLinksLayoutColumn) {
|
|
7549
7928
|
return "\n flex-direction: column;\n ";
|
|
7550
7929
|
}
|
|
7551
7930
|
return '';
|
|
7552
|
-
}, devices.mobile, getButtonsMinHeight, function (
|
|
7553
|
-
var fullWidth =
|
|
7931
|
+
}, devices.mobile, getButtonsMinHeight, function (_ref13) {
|
|
7932
|
+
var fullWidth = _ref13.fullWidth;
|
|
7554
7933
|
return fullWidth ? '0' : '20px';
|
|
7555
|
-
}, function (
|
|
7556
|
-
var fullWidth =
|
|
7934
|
+
}, function (_ref14) {
|
|
7935
|
+
var fullWidth = _ref14.fullWidth;
|
|
7557
7936
|
return fullWidth ? '0' : '20px';
|
|
7558
|
-
}, devices.tablet, getButtonsMinHeight, function (
|
|
7559
|
-
var primaryButtonTextLength =
|
|
7560
|
-
tertiaryButtonTextLength =
|
|
7937
|
+
}, devices.tablet, getButtonsMinHeight, function (_ref15) {
|
|
7938
|
+
var primaryButtonTextLength = _ref15.primaryButtonTextLength,
|
|
7939
|
+
tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
|
|
7561
7940
|
var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
|
|
7562
7941
|
if (isLinksLayoutColumnTablet) {
|
|
7563
7942
|
return "\n flex-direction: column;\n ";
|
|
@@ -7565,69 +7944,12 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templa
|
|
|
7565
7944
|
return '';
|
|
7566
7945
|
});
|
|
7567
7946
|
|
|
7568
|
-
var
|
|
7569
|
-
|
|
7570
|
-
|
|
7571
|
-
var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
|
|
7572
|
-
if (addDots === void 0) {
|
|
7573
|
-
addDots = false;
|
|
7574
|
-
}
|
|
7575
|
-
var textContent = stripAllHtmlTags(htmlString);
|
|
7576
|
-
if (textContent.length <= resultLength) {
|
|
7577
|
-
return htmlString;
|
|
7578
|
-
}
|
|
7579
|
-
var accumulatedText = '';
|
|
7580
|
-
var tagStack = [];
|
|
7581
|
-
var charCount = 0;
|
|
7582
|
-
var closeTags = function closeTags() {
|
|
7583
|
-
while (tagStack.length > 0) {
|
|
7584
|
-
accumulatedText += "</" + tagStack.pop() + ">";
|
|
7585
|
-
}
|
|
7586
|
-
};
|
|
7587
|
-
for (var i = 0; i < htmlString.length; i++) {
|
|
7588
|
-
var _char = htmlString[i];
|
|
7589
|
-
if (_char === '<') {
|
|
7590
|
-
accumulatedText += _char;
|
|
7591
|
-
if (htmlString[i + 1] !== '/') {
|
|
7592
|
-
var tagNameEnd = htmlString.indexOf('>', i);
|
|
7593
|
-
var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
|
|
7594
|
-
tagStack.push(tagName);
|
|
7595
|
-
accumulatedText += tagName + ">";
|
|
7596
|
-
i = tagNameEnd;
|
|
7597
|
-
}
|
|
7598
|
-
} else if (_char === '>') {
|
|
7599
|
-
accumulatedText += _char;
|
|
7600
|
-
} else if (charCount < resultLength) {
|
|
7601
|
-
accumulatedText += _char;
|
|
7602
|
-
charCount++;
|
|
7603
|
-
}
|
|
7604
|
-
if (charCount >= resultLength) {
|
|
7605
|
-
if (addDots) {
|
|
7606
|
-
accumulatedText += '...';
|
|
7607
|
-
}
|
|
7608
|
-
break;
|
|
7609
|
-
}
|
|
7610
|
-
}
|
|
7611
|
-
closeTags();
|
|
7612
|
-
return accumulatedText;
|
|
7613
|
-
};
|
|
7614
|
-
var truncate = function truncate(str, n) {
|
|
7615
|
-
return str.length >= n ? str.substring(0, n) : str;
|
|
7616
|
-
};
|
|
7617
|
-
var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
|
|
7618
|
-
if (addDots === void 0) {
|
|
7619
|
-
addDots = false;
|
|
7620
|
-
}
|
|
7621
|
-
var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
|
|
7622
|
-
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
7623
|
-
};
|
|
7624
|
-
|
|
7625
|
-
var _excluded$i = ["text"],
|
|
7626
|
-
_excluded2$1 = ["text"];
|
|
7627
|
-
var _buttonTypeToButton;
|
|
7947
|
+
var _excluded$j = ["text"],
|
|
7948
|
+
_excluded2$2 = ["text"];
|
|
7949
|
+
var _buttonTypeToButton$1;
|
|
7628
7950
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
7629
7951
|
var LENGTH_SMALL_TEXT$2 = 19;
|
|
7630
|
-
var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
|
|
7952
|
+
var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
|
|
7631
7953
|
var Card = function Card(_ref) {
|
|
7632
7954
|
var _labelParams$color;
|
|
7633
7955
|
var _ref$progress = _ref.progress,
|
|
@@ -7665,18 +7987,20 @@ var Card = function Card(_ref) {
|
|
|
7665
7987
|
var _useState = useState(false),
|
|
7666
7988
|
hovered = _useState[0],
|
|
7667
7989
|
setHovered = _useState[1];
|
|
7990
|
+
var cardTitleId = "card-title-" + title;
|
|
7991
|
+
var cardDescriptionId = "card-desc-" + title;
|
|
7668
7992
|
var truncatedText = truncateHtmlString(text, 185, true);
|
|
7669
7993
|
var firstButton = links == null ? void 0 : links[0];
|
|
7670
7994
|
var _ref2 = firstButton || {},
|
|
7671
7995
|
_ref2$text = _ref2.text,
|
|
7672
7996
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7673
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
7997
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
|
|
7674
7998
|
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
7675
7999
|
var secondButton = links == null ? void 0 : links[1];
|
|
7676
8000
|
var _ref3 = secondButton || {},
|
|
7677
8001
|
_ref3$text = _ref3.text,
|
|
7678
8002
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7679
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
8003
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
|
|
7680
8004
|
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
|
|
7681
8005
|
var hoverHandler = function hoverHandler(value) {
|
|
7682
8006
|
if (value) {
|
|
@@ -7688,8 +8012,8 @@ var Card = function Card(_ref) {
|
|
|
7688
8012
|
}
|
|
7689
8013
|
setHovered(value);
|
|
7690
8014
|
};
|
|
7691
|
-
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
|
|
7692
|
-
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : TertiaryButton;
|
|
8015
|
+
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
|
|
8016
|
+
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
|
|
7693
8017
|
return /*#__PURE__*/React__default.createElement(CardContainer, {
|
|
7694
8018
|
onMouseOver: function onMouseOver() {
|
|
7695
8019
|
return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
|
|
@@ -7699,21 +8023,26 @@ var Card = function Card(_ref) {
|
|
|
7699
8023
|
},
|
|
7700
8024
|
onlyShowButtonsOnHover: onlyShowButtonsOnHover,
|
|
7701
8025
|
"data-testid": "cardcontainer",
|
|
7702
|
-
isCardClickable: !!firstButton
|
|
8026
|
+
isCardClickable: !!firstButton,
|
|
8027
|
+
role: "region",
|
|
8028
|
+
"aria-labelledby": cardTitleId,
|
|
8029
|
+
"aria-describedby": cardDescriptionId
|
|
7703
8030
|
}, /*#__PURE__*/React__default.createElement("a", {
|
|
7704
8031
|
href: firstButton == null ? void 0 : firstButton.href,
|
|
7705
8032
|
target: firstButton == null ? void 0 : firstButton.target,
|
|
7706
8033
|
className: "targetLink",
|
|
7707
8034
|
style: {
|
|
7708
8035
|
flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
|
|
7709
|
-
}
|
|
8036
|
+
},
|
|
8037
|
+
"aria-label": "Navigate to " + title
|
|
7710
8038
|
}, /*#__PURE__*/React__default.createElement(LabelContainer, {
|
|
7711
8039
|
isGridCard: isGridCard,
|
|
7712
8040
|
isVisible: !!labelParams
|
|
7713
8041
|
}, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
|
|
7714
8042
|
bgColor: labelParams == null ? void 0 : labelParams.bgColor
|
|
7715
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
7716
|
-
|
|
8043
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
8044
|
+
size: "small",
|
|
8045
|
+
color: "white"
|
|
7717
8046
|
}, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7718
8047
|
iconName: labelParams.iconName,
|
|
7719
8048
|
direction: labelParams.iconDirection,
|
|
@@ -7725,24 +8054,36 @@ var Card = function Card(_ref) {
|
|
|
7725
8054
|
aspectRatio: AspectRatio['4:3']
|
|
7726
8055
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
7727
8056
|
src: image,
|
|
7728
|
-
alt: imageAltText
|
|
8057
|
+
alt: imageAltText || title
|
|
7729
8058
|
})), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
|
|
7730
8059
|
progress: progress,
|
|
7731
|
-
height:
|
|
8060
|
+
height: 6
|
|
7732
8061
|
}))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
|
|
7733
8062
|
fullWidth: fullWidth
|
|
7734
8063
|
}, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
|
|
7735
8064
|
list: tags
|
|
7736
|
-
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4,
|
|
7737
|
-
|
|
7738
|
-
},
|
|
7739
|
-
|
|
7740
|
-
|
|
8065
|
+
}) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
|
|
8066
|
+
id: cardTitleId
|
|
8067
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8068
|
+
hierarchy: "h3",
|
|
8069
|
+
size: "small"
|
|
8070
|
+
}, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
|
|
8071
|
+
id: cardTitleId
|
|
8072
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8073
|
+
hierarchy: "h3",
|
|
8074
|
+
size: "medium"
|
|
8075
|
+
}, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
|
|
8076
|
+
size: "large"
|
|
8077
|
+
}, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8078
|
+
size: "large"
|
|
8079
|
+
}, /*#__PURE__*/React__default.createElement(TextContainer$2, {
|
|
8080
|
+
id: cardDescriptionId,
|
|
7741
8081
|
dangerouslySetInnerHTML: {
|
|
7742
8082
|
__html: truncatedText
|
|
7743
8083
|
}
|
|
7744
|
-
}), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(
|
|
7745
|
-
|
|
8084
|
+
})), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
8085
|
+
size: "large",
|
|
8086
|
+
color: "red"
|
|
7746
8087
|
}, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7747
8088
|
fullWidth: fullWidth
|
|
7748
8089
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
@@ -7754,12 +8095,16 @@ var Card = function Card(_ref) {
|
|
|
7754
8095
|
tertiaryButtonTextLength: secondButtonText.length,
|
|
7755
8096
|
onlyShowButtonsOnHover: onlyShowButtonsOnHover,
|
|
7756
8097
|
fullWidth: fullWidth
|
|
7757
|
-
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
|
|
8098
|
+
}, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
|
|
8099
|
+
"aria-label": firstButtonText
|
|
8100
|
+
}, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
|
|
8101
|
+
"aria-label": secondButtonText
|
|
8102
|
+
}, restSecondButton), tertiaryButtonTextTruncate)))));
|
|
7758
8103
|
};
|
|
7759
8104
|
|
|
7760
|
-
var _templateObject$
|
|
7761
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7762
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
8105
|
+
var _templateObject$T, _templateObject2$E;
|
|
8106
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__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);
|
|
8107
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7763
8108
|
|
|
7764
8109
|
var Cards = function Cards(_ref) {
|
|
7765
8110
|
var cards = _ref.cards,
|
|
@@ -7801,9 +8146,9 @@ var Cards = function Cards(_ref) {
|
|
|
7801
8146
|
}));
|
|
7802
8147
|
};
|
|
7803
8148
|
|
|
7804
|
-
var _templateObject$
|
|
7805
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
7806
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
8149
|
+
var _templateObject$U, _templateObject2$F, _templateObject3$r, _templateObject4$m, _templateObject5$h;
|
|
8150
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__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);
|
|
8151
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__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) {
|
|
7807
8152
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7808
8153
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
|
|
7809
8154
|
}, function (_ref2) {
|
|
@@ -7869,9 +8214,9 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7869
8214
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
|
|
7870
8215
|
};
|
|
7871
8216
|
|
|
7872
|
-
var _templateObject$
|
|
7873
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7874
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
8217
|
+
var _templateObject$V, _templateObject2$G, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$8;
|
|
8218
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
8219
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$G || (_templateObject2$G = /*#__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) {
|
|
7875
8220
|
return props.clickable ? 'pointer' : 'default';
|
|
7876
8221
|
}, devices.mobile);
|
|
7877
8222
|
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
@@ -7952,12 +8297,12 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7952
8297
|
}), link.text))));
|
|
7953
8298
|
};
|
|
7954
8299
|
|
|
7955
|
-
var _templateObject$
|
|
7956
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
8300
|
+
var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
|
|
8301
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__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) {
|
|
7957
8302
|
var imageToLeft = _ref.imageToLeft;
|
|
7958
8303
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7959
8304
|
}, devices.mobile);
|
|
7960
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8305
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7961
8306
|
var imageToLeft = _ref2.imageToLeft;
|
|
7962
8307
|
return imageToLeft ? 'left' : 'right';
|
|
7963
8308
|
}, devices.mobile);
|
|
@@ -7997,26 +8342,70 @@ var Editorial = function Editorial(_ref) {
|
|
|
7997
8342
|
})))));
|
|
7998
8343
|
};
|
|
7999
8344
|
|
|
8000
|
-
var
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8345
|
+
var InformationCtaVariants = {
|
|
8346
|
+
Primary: 'Primary',
|
|
8347
|
+
Secondary: 'Secondary',
|
|
8348
|
+
Tertiary: 'Tertiary',
|
|
8349
|
+
TextLink: 'TextLink'
|
|
8350
|
+
};
|
|
8351
|
+
|
|
8352
|
+
var COLORS$4 = {
|
|
8353
|
+
"default": 'var(--information-panel-button-color)',
|
|
8354
|
+
background: 'var(--information-panel-button-bg-color)',
|
|
8355
|
+
hover: 'var(--information-panel-button-hover-color)',
|
|
8356
|
+
pressed: 'var(--information-panel-button-pressed-color)'
|
|
8357
|
+
};
|
|
8358
|
+
var getTextColor$4 = function getTextColor(variant, colorValue) {
|
|
8359
|
+
return variant === InformationCtaVariants.Primary ? COLORS$4["default"] : colorValue;
|
|
8360
|
+
};
|
|
8361
|
+
var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
|
|
8362
|
+
return variant === InformationCtaVariants.Primary ? "background-color: " + colorValue + ";" : '';
|
|
8363
|
+
};
|
|
8364
|
+
var getBorderColor$1 = function getBorderColor(variant, colorValue) {
|
|
8365
|
+
return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary ? "border-color: " + colorValue + ";" : '';
|
|
8366
|
+
};
|
|
8367
|
+
|
|
8368
|
+
var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p;
|
|
8369
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__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);
|
|
8370
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8371
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$u || (_templateObject3$u = /*#__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) {
|
|
8372
|
+
var variant = _ref.variant;
|
|
8373
|
+
return getTextColor$4(variant, COLORS$4.background);
|
|
8374
|
+
}, function (_ref2) {
|
|
8375
|
+
var variant = _ref2.variant;
|
|
8376
|
+
return getBackgroundColor$2(variant, COLORS$4.background);
|
|
8377
|
+
}, function (_ref3) {
|
|
8378
|
+
var variant = _ref3.variant;
|
|
8379
|
+
return getBorderColor$1(variant, COLORS$4.background);
|
|
8380
|
+
}, function (_ref4) {
|
|
8381
|
+
var variant = _ref4.variant;
|
|
8382
|
+
return getTextColor$4(variant, COLORS$4.background);
|
|
8383
|
+
}, function (_ref5) {
|
|
8384
|
+
var variant = _ref5.variant;
|
|
8385
|
+
return getTextColor$4(variant, COLORS$4.hover);
|
|
8386
|
+
}, function (_ref6) {
|
|
8387
|
+
var variant = _ref6.variant;
|
|
8388
|
+
return getBackgroundColor$2(variant, COLORS$4.hover);
|
|
8389
|
+
}, function (_ref7) {
|
|
8390
|
+
var variant = _ref7.variant;
|
|
8391
|
+
return getBorderColor$1(variant, COLORS$4.hover);
|
|
8392
|
+
}, function (_ref8) {
|
|
8393
|
+
var variant = _ref8.variant;
|
|
8394
|
+
return getTextColor$4(variant, COLORS$4.hover);
|
|
8395
|
+
}, function (_ref9) {
|
|
8396
|
+
var variant = _ref9.variant;
|
|
8397
|
+
return getTextColor$4(variant, COLORS$4.pressed);
|
|
8398
|
+
}, function (_ref10) {
|
|
8399
|
+
var variant = _ref10.variant;
|
|
8400
|
+
return getBackgroundColor$2(variant, COLORS$4.pressed);
|
|
8401
|
+
}, function (_ref11) {
|
|
8402
|
+
var variant = _ref11.variant;
|
|
8403
|
+
return getBorderColor$1(variant, COLORS$4.pressed);
|
|
8404
|
+
}, function (_ref12) {
|
|
8405
|
+
var variant = _ref12.variant;
|
|
8406
|
+
return getTextColor$4(variant, COLORS$4.pressed);
|
|
8019
8407
|
});
|
|
8408
|
+
var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$p || (_templateObject4$p = /*#__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);
|
|
8020
8409
|
|
|
8021
8410
|
// Helper function for rendering buttons based on the variant
|
|
8022
8411
|
var renderButton = function renderButton(_ref) {
|
|
@@ -8027,7 +8416,7 @@ var renderButton = function renderButton(_ref) {
|
|
|
8027
8416
|
iconDirection = _ref.iconDirection,
|
|
8028
8417
|
target = _ref.target;
|
|
8029
8418
|
switch (variant) {
|
|
8030
|
-
case
|
|
8419
|
+
case InformationCtaVariants.Secondary:
|
|
8031
8420
|
return /*#__PURE__*/React__default.createElement(SecondaryButton, {
|
|
8032
8421
|
href: link,
|
|
8033
8422
|
iconName: iconName,
|
|
@@ -8035,13 +8424,13 @@ var renderButton = function renderButton(_ref) {
|
|
|
8035
8424
|
target: target,
|
|
8036
8425
|
"aria-label": text
|
|
8037
8426
|
}, text);
|
|
8038
|
-
case
|
|
8427
|
+
case InformationCtaVariants.Tertiary:
|
|
8039
8428
|
return /*#__PURE__*/React__default.createElement(TertiaryButton, {
|
|
8040
8429
|
href: link,
|
|
8041
8430
|
target: target,
|
|
8042
8431
|
"aria-label": text
|
|
8043
8432
|
}, text);
|
|
8044
|
-
case
|
|
8433
|
+
case InformationCtaVariants.TextLink:
|
|
8045
8434
|
return /*#__PURE__*/React__default.createElement(TextLink, {
|
|
8046
8435
|
href: link,
|
|
8047
8436
|
iconName: iconName,
|
|
@@ -8061,17 +8450,15 @@ var renderButton = function renderButton(_ref) {
|
|
|
8061
8450
|
};
|
|
8062
8451
|
var InfoCta = function InfoCta(_ref2) {
|
|
8063
8452
|
var _ref2$variant = _ref2.variant,
|
|
8064
|
-
variant = _ref2$variant === void 0 ?
|
|
8453
|
+
variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
|
|
8065
8454
|
link = _ref2.link,
|
|
8066
8455
|
text = _ref2.text,
|
|
8067
8456
|
iconName = _ref2.iconName,
|
|
8068
8457
|
iconDirection = _ref2.iconDirection,
|
|
8069
|
-
infoThemed = _ref2.infoThemed,
|
|
8070
8458
|
_ref2$target = _ref2.target,
|
|
8071
8459
|
target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
|
|
8072
8460
|
return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
|
|
8073
|
-
variant: variant
|
|
8074
|
-
infoThemed: infoThemed
|
|
8461
|
+
variant: variant
|
|
8075
8462
|
}, renderButton({
|
|
8076
8463
|
variant: variant,
|
|
8077
8464
|
link: link,
|
|
@@ -8087,40 +8474,27 @@ var smallColumnSpan = 4;
|
|
|
8087
8474
|
var largeColumnSpan = 9;
|
|
8088
8475
|
var mediumWordBreakpoint = 8;
|
|
8089
8476
|
var longWordBreakpoint = 13;
|
|
8090
|
-
var getColumnSpan = function getColumnSpan(
|
|
8091
|
-
if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
|
|
8477
|
+
var getColumnSpan = function getColumnSpan(longestWordLength) {
|
|
8092
8478
|
if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
|
|
8093
8479
|
if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
|
|
8094
8480
|
return defaultColumnSpan;
|
|
8095
8481
|
};
|
|
8096
|
-
var renderTitle = function renderTitle(props) {
|
|
8097
|
-
var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
|
|
8098
|
-
return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
|
|
8099
|
-
level: headerLevel
|
|
8100
|
-
}, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
|
|
8101
|
-
level: headerLevel
|
|
8102
|
-
}, props.text));
|
|
8103
|
-
};
|
|
8104
8482
|
var Information = function Information(_ref) {
|
|
8105
8483
|
var body = _ref.body,
|
|
8106
8484
|
title = _ref.title,
|
|
8107
|
-
background = _ref.background,
|
|
8108
8485
|
cta = _ref.cta,
|
|
8109
8486
|
className = _ref.className;
|
|
8110
8487
|
var safeTitle = title || {
|
|
8111
8488
|
text: '',
|
|
8112
|
-
|
|
8113
|
-
textSize: 5
|
|
8489
|
+
textSize: 'medium'
|
|
8114
8490
|
}; // Provide a fallback
|
|
8115
8491
|
var titleWords = safeTitle.text.split(' ');
|
|
8116
8492
|
var titleWordLengths = titleWords.map(function (word) {
|
|
8117
8493
|
return word.length;
|
|
8118
8494
|
});
|
|
8119
8495
|
var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
|
|
8120
|
-
var titleColumnSpan = getColumnSpan(
|
|
8121
|
-
var bgColour = background != null ? background : IInformationBackgroundColour.White;
|
|
8496
|
+
var titleColumnSpan = getColumnSpan(maxTitleWordLength);
|
|
8122
8497
|
return /*#__PURE__*/React__default.createElement(InfoWrapper, {
|
|
8123
|
-
background: bgColour,
|
|
8124
8498
|
"data-testid": "infoWrapper",
|
|
8125
8499
|
className: className
|
|
8126
8500
|
}, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -8128,20 +8502,22 @@ var Information = function Information(_ref) {
|
|
|
8128
8502
|
columnStartDevice: 2,
|
|
8129
8503
|
columnSpanDesktop: titleColumnSpan,
|
|
8130
8504
|
columnSpanDevice: 12
|
|
8131
|
-
}, /*#__PURE__*/React__default.createElement(InfoTitle, null,
|
|
8505
|
+
}, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8506
|
+
hierarchy: "h2",
|
|
8507
|
+
size: safeTitle.textSize,
|
|
8508
|
+
color: "inherit"
|
|
8509
|
+
}, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8132
8510
|
columnStartDesktop: titleColumnSpan + 2,
|
|
8133
8511
|
columnStartDevice: 2,
|
|
8134
8512
|
columnSpanDesktop: 14 - titleColumnSpan,
|
|
8135
8513
|
columnSpanDevice: 12
|
|
8136
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
8137
|
-
background: bgColour,
|
|
8514
|
+
}, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
|
|
8138
8515
|
dangerouslySetInnerHTML: {
|
|
8139
8516
|
__html: body
|
|
8140
8517
|
}
|
|
8141
8518
|
}), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
|
|
8142
8519
|
link: cta.link,
|
|
8143
8520
|
variant: cta.variant,
|
|
8144
|
-
infoThemed: bgColour !== IInformationBackgroundColour.White,
|
|
8145
8521
|
text: cta.text,
|
|
8146
8522
|
iconName: cta.iconName,
|
|
8147
8523
|
iconDirection: cta.iconDirection,
|
|
@@ -8149,15 +8525,15 @@ var Information = function Information(_ref) {
|
|
|
8149
8525
|
})))));
|
|
8150
8526
|
};
|
|
8151
8527
|
|
|
8152
|
-
var _templateObject$
|
|
8153
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8528
|
+
var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$6;
|
|
8529
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__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) {
|
|
8154
8530
|
var theme = _ref.theme;
|
|
8155
8531
|
return theme.colors.primary;
|
|
8156
8532
|
}, function (_ref2) {
|
|
8157
8533
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
8158
8534
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
8159
8535
|
}, devices.mobile);
|
|
8160
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
8536
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$J || (_templateObject2$J = /*#__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);
|
|
8161
8537
|
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__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) {
|
|
8162
8538
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
8163
8539
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
@@ -8166,12 +8542,12 @@ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateOb
|
|
|
8166
8542
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
8167
8543
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
8168
8544
|
}, devices.mobile);
|
|
8169
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8545
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__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"])));
|
|
8170
8546
|
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__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);
|
|
8171
8547
|
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__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);
|
|
8172
8548
|
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__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"])));
|
|
8173
8549
|
|
|
8174
|
-
var _excluded$
|
|
8550
|
+
var _excluded$k = ["text"];
|
|
8175
8551
|
var PageHeading = function PageHeading(_ref) {
|
|
8176
8552
|
var title = _ref.title,
|
|
8177
8553
|
text = _ref.text,
|
|
@@ -8187,7 +8563,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8187
8563
|
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
8188
8564
|
var _ref2 = link || {},
|
|
8189
8565
|
linkText = _ref2.text,
|
|
8190
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8566
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
|
|
8191
8567
|
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
8192
8568
|
var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
|
|
8193
8569
|
var isTitleUnAvailable = !title;
|
|
@@ -8215,13 +8591,13 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
8215
8591
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
|
|
8216
8592
|
};
|
|
8217
8593
|
|
|
8218
|
-
var _excluded$
|
|
8594
|
+
var _excluded$l = ["link"];
|
|
8219
8595
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
8220
8596
|
var link = _ref.link,
|
|
8221
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
8597
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
|
|
8222
8598
|
var coreLink = link && _extends({}, link, {
|
|
8223
|
-
color:
|
|
8224
|
-
bgColor:
|
|
8599
|
+
color: ThemeColor['base-white'],
|
|
8600
|
+
bgColor: ThemeColor['base-black']
|
|
8225
8601
|
});
|
|
8226
8602
|
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
8227
8603
|
theme: ThemeType.Core
|
|
@@ -8230,13 +8606,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
8230
8606
|
})));
|
|
8231
8607
|
};
|
|
8232
8608
|
|
|
8233
|
-
var _excluded$
|
|
8609
|
+
var _excluded$m = ["link"];
|
|
8234
8610
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
8235
8611
|
var link = _ref.link,
|
|
8236
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
8612
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
|
|
8237
8613
|
var cinemaLink = link && _extends({}, link, {
|
|
8238
|
-
color:
|
|
8239
|
-
bgColor:
|
|
8614
|
+
color: ThemeColor['base-black'],
|
|
8615
|
+
bgColor: ThemeColor['base-white']
|
|
8240
8616
|
});
|
|
8241
8617
|
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
8242
8618
|
theme: ThemeType.Cinema
|
|
@@ -8247,17 +8623,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
8247
8623
|
})));
|
|
8248
8624
|
};
|
|
8249
8625
|
|
|
8250
|
-
var _templateObject$
|
|
8251
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8252
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8626
|
+
var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$7;
|
|
8627
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__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);
|
|
8628
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__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);
|
|
8253
8629
|
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$w || (_templateObject3$w = /*#__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);
|
|
8254
8630
|
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__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);
|
|
8255
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8631
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
8256
8632
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__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);
|
|
8257
8633
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__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);
|
|
8258
8634
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__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);
|
|
8259
8635
|
|
|
8260
|
-
var _excluded$
|
|
8636
|
+
var _excluded$n = ["text"];
|
|
8261
8637
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
8262
8638
|
var children = _ref.children,
|
|
8263
8639
|
text = _ref.text,
|
|
@@ -8275,7 +8651,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8275
8651
|
var truncatedText = text == null ? void 0 : text.substring(0, 75);
|
|
8276
8652
|
var _ref2 = link || {},
|
|
8277
8653
|
linkText = _ref2.text,
|
|
8278
|
-
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
8654
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
|
|
8279
8655
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
8280
8656
|
bgUrlDesktop: bgUrlDesktop,
|
|
8281
8657
|
bgUrlDevice: bgUrlDevice,
|
|
@@ -8320,12 +8696,12 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8320
8696
|
}, "Scroll Down"))) : null);
|
|
8321
8697
|
};
|
|
8322
8698
|
|
|
8323
|
-
var _templateObject$
|
|
8324
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8699
|
+
var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m;
|
|
8700
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__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) {
|
|
8325
8701
|
var color = _ref.color;
|
|
8326
8702
|
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 ";
|
|
8327
8703
|
}, devices.mobileAndTablet);
|
|
8328
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8704
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__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) {
|
|
8329
8705
|
var hasImage = _ref2.hasImage;
|
|
8330
8706
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
8331
8707
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
@@ -8334,7 +8710,7 @@ var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$
|
|
|
8334
8710
|
});
|
|
8335
8711
|
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__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);
|
|
8336
8712
|
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__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);
|
|
8337
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8713
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__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);
|
|
8338
8714
|
|
|
8339
8715
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
8340
8716
|
var _image$src, _image$alt;
|
|
@@ -8364,16 +8740,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8364
8740
|
})))));
|
|
8365
8741
|
};
|
|
8366
8742
|
|
|
8367
|
-
var _templateObject
|
|
8368
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8743
|
+
var _templateObject$$;
|
|
8744
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
8369
8745
|
|
|
8370
|
-
var _excluded$
|
|
8746
|
+
var _excluded$o = ["link"];
|
|
8371
8747
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
8372
8748
|
var link = _ref.link,
|
|
8373
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
8749
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
|
|
8374
8750
|
var streamLink = link && _extends({}, link, {
|
|
8375
|
-
color:
|
|
8376
|
-
bgColor:
|
|
8751
|
+
color: ThemeColor['base-black'],
|
|
8752
|
+
bgColor: ThemeColor['base-white']
|
|
8377
8753
|
});
|
|
8378
8754
|
return /*#__PURE__*/React__default.createElement(Theme, {
|
|
8379
8755
|
theme: ThemeType.Stream
|
|
@@ -8384,12 +8760,199 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
8384
8760
|
}))));
|
|
8385
8761
|
};
|
|
8386
8762
|
|
|
8387
|
-
var _templateObject
|
|
8388
|
-
var
|
|
8389
|
-
var
|
|
8390
|
-
var
|
|
8763
|
+
var _templateObject$10, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4, _templateObject11$2;
|
|
8764
|
+
var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
8765
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
|
|
8766
|
+
var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__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);
|
|
8767
|
+
var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__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);
|
|
8768
|
+
var ContentSection = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__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) {
|
|
8769
|
+
var theme = _ref.theme;
|
|
8770
|
+
return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
|
|
8771
|
+
}, function (_ref2) {
|
|
8772
|
+
var showBlock = _ref2.showBlock;
|
|
8773
|
+
return showBlock ? 'block' : 'none';
|
|
8774
|
+
}, devices.mobile);
|
|
8775
|
+
var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
|
|
8776
|
+
var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__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) {
|
|
8777
|
+
var isBadgePresent = _ref3.isBadgePresent;
|
|
8778
|
+
return isBadgePresent ? '1' : '4';
|
|
8779
|
+
});
|
|
8780
|
+
var MainButtonWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__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) {
|
|
8781
|
+
var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
|
|
8782
|
+
return isAdditionalButtonPresent ? '20px' : '0';
|
|
8783
|
+
});
|
|
8784
|
+
var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
|
|
8785
|
+
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__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) {
|
|
8786
|
+
var theme = _ref5.theme;
|
|
8787
|
+
return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
|
|
8788
|
+
}, devices.mobile, function (_ref6) {
|
|
8789
|
+
var isButtonPresent = _ref6.isButtonPresent;
|
|
8790
|
+
return isButtonPresent ? '20px' : '0';
|
|
8791
|
+
});
|
|
8792
|
+
var ContentWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__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);
|
|
8793
|
+
|
|
8794
|
+
var PageHeadingPromoBadge;
|
|
8795
|
+
(function (PageHeadingPromoBadge) {
|
|
8796
|
+
PageHeadingPromoBadge["Stream"] = "Stream";
|
|
8797
|
+
PageHeadingPromoBadge["Cinema"] = "Cinema";
|
|
8798
|
+
})(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
|
|
8799
|
+
|
|
8800
|
+
var Badge = function Badge(_ref) {
|
|
8801
|
+
var isMobile = _ref.isMobile,
|
|
8802
|
+
theme = _ref.theme,
|
|
8803
|
+
badge = _ref.badge;
|
|
8804
|
+
if (!badge) return null;
|
|
8805
|
+
var color = theme === ThemeType.Cinema ? Colors.Black : Colors.White;
|
|
8806
|
+
var alignment = isMobile ? 'center' : 'left';
|
|
8807
|
+
return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
|
|
8808
|
+
"data-testid": "promo-heading-badge"
|
|
8809
|
+
}, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
|
|
8810
|
+
fillColor: color,
|
|
8811
|
+
align: alignment
|
|
8812
|
+
})) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
|
|
8813
|
+
fillColor: color,
|
|
8814
|
+
align: alignment
|
|
8815
|
+
})));
|
|
8816
|
+
};
|
|
8817
|
+
|
|
8818
|
+
var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
|
|
8819
|
+
var link = _ref.link,
|
|
8820
|
+
theme = _ref.theme;
|
|
8821
|
+
var text = link.text;
|
|
8822
|
+
if (theme === ThemeType.Cinema) {
|
|
8823
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
|
|
8824
|
+
textColor: ThemeColor['base-white'],
|
|
8825
|
+
backgroundColor: ThemeColor['base-black'],
|
|
8826
|
+
hoveredColor: ThemeColor['rbo-black-hovered'],
|
|
8827
|
+
pressedColor: ThemeColor['rbo-black-pressed']
|
|
8828
|
+
}), text);
|
|
8829
|
+
}
|
|
8830
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
|
|
8831
|
+
textColor: ThemeColor['base-black'],
|
|
8832
|
+
backgroundColor: ThemeColor['base-white'],
|
|
8833
|
+
hoveredColor: ThemeColor['white-hovered'],
|
|
8834
|
+
pressedColor: ThemeColor['white-pressed']
|
|
8835
|
+
}), text);
|
|
8836
|
+
};
|
|
8837
|
+
var Button$1 = function Button(_ref2) {
|
|
8838
|
+
var link = _ref2.link,
|
|
8839
|
+
theme = _ref2.theme,
|
|
8840
|
+
isMobile = _ref2.isMobile;
|
|
8841
|
+
var text = link.text;
|
|
8842
|
+
if (isMobile) {
|
|
8843
|
+
return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
|
|
8844
|
+
theme: theme,
|
|
8845
|
+
link: link
|
|
8846
|
+
});
|
|
8847
|
+
}
|
|
8848
|
+
var buttonColor = theme === ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
|
|
8849
|
+
if (link.isTextLink) {
|
|
8850
|
+
return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
|
|
8851
|
+
color: buttonColor,
|
|
8852
|
+
iconName: undefined
|
|
8853
|
+
}), text);
|
|
8854
|
+
}
|
|
8855
|
+
return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
|
|
8856
|
+
textColor: buttonColor,
|
|
8857
|
+
borderColor: buttonColor,
|
|
8858
|
+
hoveredColor: buttonColor,
|
|
8859
|
+
pressedColor: buttonColor
|
|
8860
|
+
}), text);
|
|
8861
|
+
};
|
|
8862
|
+
|
|
8863
|
+
var Image = function Image(_ref) {
|
|
8864
|
+
var desktop = _ref.desktop,
|
|
8865
|
+
mobile = _ref.mobile,
|
|
8866
|
+
alt = _ref.alt;
|
|
8867
|
+
var isMobile = useMobile();
|
|
8868
|
+
return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
8869
|
+
aspectRatio: isMobile ? AspectRatio['75:32'] : AspectRatio['90:17']
|
|
8870
|
+
}, /*#__PURE__*/React__default.createElement("picture", {
|
|
8871
|
+
"data-testid": "promo-heading-picture"
|
|
8872
|
+
}, /*#__PURE__*/React__default.createElement("source", {
|
|
8873
|
+
srcSet: mobile,
|
|
8874
|
+
media: "(max-width: 768px)"
|
|
8875
|
+
}), /*#__PURE__*/React__default.createElement("source", {
|
|
8876
|
+
srcSet: desktop,
|
|
8877
|
+
media: "(min-width: 769px)"
|
|
8878
|
+
}), /*#__PURE__*/React__default.createElement("img", {
|
|
8879
|
+
src: desktop,
|
|
8880
|
+
alt: alt,
|
|
8881
|
+
"data-testid": "promo-heading-image"
|
|
8882
|
+
})));
|
|
8883
|
+
};
|
|
8884
|
+
|
|
8885
|
+
var TITLE_MAX_LENGTH = 40;
|
|
8886
|
+
var PageHeadingPromo = function PageHeadingPromo(_ref) {
|
|
8887
|
+
var _ref$sponsor = _ref.sponsor,
|
|
8888
|
+
sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
|
|
8889
|
+
className = _ref.className,
|
|
8890
|
+
theme = _ref.theme,
|
|
8891
|
+
badge = _ref.badge,
|
|
8892
|
+
mainLink = _ref.mainLink,
|
|
8893
|
+
title = _ref.title,
|
|
8894
|
+
titleSemanticLevel = _ref.titleSemanticLevel,
|
|
8895
|
+
additionalLink = _ref.additionalLink,
|
|
8896
|
+
image = _ref.image;
|
|
8897
|
+
var isMobile = useMobile();
|
|
8898
|
+
var showImageButton = !title && !badge && !additionalLink && !isMobile;
|
|
8899
|
+
var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
|
|
8900
|
+
var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
|
|
8901
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, {
|
|
8902
|
+
className: className
|
|
8903
|
+
}, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
|
|
8904
|
+
"data-testid": "promo-heading-sponsor"
|
|
8905
|
+
}, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
|
|
8906
|
+
mobile: image.mobile,
|
|
8907
|
+
desktop: image.desktop,
|
|
8908
|
+
alt: image.alt
|
|
8909
|
+
}), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
|
|
8910
|
+
"data-testid": "promo-heading-image-button"
|
|
8911
|
+
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
|
|
8912
|
+
textColor: ThemeColor['base-black'],
|
|
8913
|
+
backgroundColor: ThemeColor['base-white'],
|
|
8914
|
+
hoveredColor: ThemeColor['white-hovered'],
|
|
8915
|
+
pressedColor: ThemeColor['white-pressed']
|
|
8916
|
+
}), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
|
|
8917
|
+
theme: theme,
|
|
8918
|
+
showBlock: showContentBlock
|
|
8919
|
+
}, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8920
|
+
columnStartDesktop: 2,
|
|
8921
|
+
columnSpanDesktop: 14,
|
|
8922
|
+
columnStartDevice: 2,
|
|
8923
|
+
columnSpanDevice: 12
|
|
8924
|
+
}, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
|
|
8925
|
+
theme: theme
|
|
8926
|
+
}, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
|
|
8927
|
+
isBadgePresent: !!badge
|
|
8928
|
+
}, /*#__PURE__*/React__default.createElement(Badge, {
|
|
8929
|
+
theme: theme,
|
|
8930
|
+
badge: badge,
|
|
8931
|
+
isMobile: isMobile
|
|
8932
|
+
}), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
|
|
8933
|
+
theme: theme,
|
|
8934
|
+
link: additionalLink
|
|
8935
|
+
}))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$2, {
|
|
8936
|
+
theme: theme,
|
|
8937
|
+
isButtonPresent: !!mainLink || !!additionalLink
|
|
8938
|
+
}, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
8939
|
+
hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
|
|
8940
|
+
size: "large"
|
|
8941
|
+
}, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
|
|
8942
|
+
isAdditionalButtonPresent: !!additionalLink && !badge
|
|
8943
|
+
}, /*#__PURE__*/React__default.createElement(Button$1, {
|
|
8944
|
+
theme: theme,
|
|
8945
|
+
link: mainLink,
|
|
8946
|
+
isMobile: isMobile
|
|
8947
|
+
}))))))));
|
|
8948
|
+
};
|
|
8949
|
+
|
|
8950
|
+
var _templateObject$11, _templateObject2$N, _templateObject3$z, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject10$5;
|
|
8951
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__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);
|
|
8952
|
+
var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__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"])));
|
|
8953
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8391
8954
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__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);
|
|
8392
|
-
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$
|
|
8955
|
+
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$i || (_templateObject6$i = /*#__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) {
|
|
8393
8956
|
var invert = _ref.invert,
|
|
8394
8957
|
theme = _ref.theme;
|
|
8395
8958
|
return invert ? theme.colors.white : theme.colors.primary;
|
|
@@ -8405,10 +8968,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (
|
|
|
8405
8968
|
var theme = _ref4.theme;
|
|
8406
8969
|
return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
|
|
8407
8970
|
}, devices.tablet, devices.mobile);
|
|
8408
|
-
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
8409
|
-
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$
|
|
8410
|
-
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
8411
|
-
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$
|
|
8971
|
+
var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__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);
|
|
8972
|
+
var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__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);
|
|
8973
|
+
var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__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);
|
|
8974
|
+
var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
|
|
8412
8975
|
var invert = _ref5.invert,
|
|
8413
8976
|
theme = _ref5.theme;
|
|
8414
8977
|
return invert ? theme.colors.primary : theme.colors.white;
|
|
@@ -8460,7 +9023,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
|
|
|
8460
9023
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
8461
9024
|
var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
|
|
8462
9025
|
var target = sameSiteUrl ? '_self' : '_blank';
|
|
8463
|
-
var color = invert ?
|
|
9026
|
+
var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
|
|
8464
9027
|
switch (brandingStyle) {
|
|
8465
9028
|
case 'BlockText':
|
|
8466
9029
|
return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
|
|
@@ -8497,7 +9060,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8497
9060
|
return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
|
|
8498
9061
|
};
|
|
8499
9062
|
|
|
8500
|
-
var _excluded$
|
|
9063
|
+
var _excluded$p = ["text"];
|
|
8501
9064
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
8502
9065
|
var mobileVideo = video.mobile || video.desktop;
|
|
8503
9066
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -8604,7 +9167,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8604
9167
|
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
8605
9168
|
var _ref5 = link || {},
|
|
8606
9169
|
linkText = _ref5.text,
|
|
8607
|
-
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$
|
|
9170
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$p);
|
|
8608
9171
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
8609
9172
|
var video = {
|
|
8610
9173
|
elementId: 'compact-header-video',
|
|
@@ -8642,15 +9205,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8642
9205
|
}), linkText))))));
|
|
8643
9206
|
};
|
|
8644
9207
|
|
|
8645
|
-
var _templateObject$
|
|
8646
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject$
|
|
8647
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
9208
|
+
var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$u;
|
|
9209
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
9210
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$O || (_templateObject2$O = /*#__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"])));
|
|
8648
9211
|
// PageNumber extends bodyText but uses subtitle-1 font size
|
|
8649
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
9212
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__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) {
|
|
8650
9213
|
var active = _ref.active;
|
|
8651
9214
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8652
9215
|
});
|
|
8653
|
-
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$
|
|
9216
|
+
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$u || (_templateObject4$u = /*#__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"])));
|
|
8654
9217
|
|
|
8655
9218
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8656
9219
|
// If there are less than 6 pages, return all pages
|
|
@@ -8716,14 +9279,14 @@ var Pagination = function Pagination(_ref) {
|
|
|
8716
9279
|
})))));
|
|
8717
9280
|
};
|
|
8718
9281
|
|
|
8719
|
-
var _templateObject$
|
|
8720
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8721
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8722
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8723
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9282
|
+
var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
9283
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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);
|
|
9284
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
9285
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
9286
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8724
9287
|
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
|
|
8725
|
-
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$
|
|
8726
|
-
var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$
|
|
9288
|
+
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$j || (_templateObject6$j = /*#__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"])));
|
|
9289
|
+
var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
|
|
8727
9290
|
|
|
8728
9291
|
var Person = function Person(_ref) {
|
|
8729
9292
|
var person = _ref.person,
|
|
@@ -8780,14 +9343,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8780
9343
|
}));
|
|
8781
9344
|
};
|
|
8782
9345
|
|
|
8783
|
-
var _templateObject$
|
|
8784
|
-
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8785
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
9346
|
+
var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
|
|
9347
|
+
var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
9348
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__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) {
|
|
8786
9349
|
var columnCount = _ref.columnCount;
|
|
8787
9350
|
return "repeat(" + columnCount + ", 1fr)";
|
|
8788
9351
|
}, devices.mobile, devices.tablet);
|
|
8789
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8790
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9352
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
|
|
9353
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
|
|
8791
9354
|
|
|
8792
9355
|
// Get the total character length of a property in an array of objects
|
|
8793
9356
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
@@ -8847,8 +9410,8 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8847
9410
|
var span = namesLength > characterThreshold ? largeColumnSpan : 1;
|
|
8848
9411
|
var unboundedEnd = nextColumnStart + span;
|
|
8849
9412
|
var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
|
|
8850
|
-
var
|
|
8851
|
-
nextColumnStart =
|
|
9413
|
+
var end = start + span;
|
|
9414
|
+
nextColumnStart = end % columnCount || columnCount;
|
|
8852
9415
|
return {
|
|
8853
9416
|
columnStart: start,
|
|
8854
9417
|
columnSpan: span
|
|
@@ -8905,14 +9468,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8905
9468
|
}, creditEntries);
|
|
8906
9469
|
};
|
|
8907
9470
|
|
|
8908
|
-
var _templateObject$
|
|
9471
|
+
var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8909
9472
|
var LENGTH_TEXT = 28;
|
|
8910
9473
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8911
9474
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8912
9475
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8913
9476
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8914
9477
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8915
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9478
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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) {
|
|
8916
9479
|
var imageToLeft = _ref.imageToLeft;
|
|
8917
9480
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8918
9481
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8922,9 +9485,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
|
|
|
8922
9485
|
var asCard = _ref3.asCard;
|
|
8923
9486
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8924
9487
|
});
|
|
8925
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
8926
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
8927
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
9488
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$R || (_templateObject2$R = /*#__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"])));
|
|
9489
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__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"])));
|
|
9490
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__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) {
|
|
8928
9491
|
var hasTextLinks = _ref4.hasTextLinks;
|
|
8929
9492
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8930
9493
|
}, function (_ref5) {
|
|
@@ -8952,12 +9515,12 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_te
|
|
|
8952
9515
|
var marginBottom = _ref7.marginBottom;
|
|
8953
9516
|
return marginBottom + "px";
|
|
8954
9517
|
});
|
|
8955
|
-
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$
|
|
8956
|
-
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$
|
|
8957
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$
|
|
8958
|
-
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$
|
|
8959
|
-
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$
|
|
8960
|
-
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$
|
|
9518
|
+
var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
|
|
9519
|
+
var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
|
|
9520
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
|
|
9521
|
+
var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__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);
|
|
9522
|
+
var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$6 || (_templateObject10$6 = /*#__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);
|
|
9523
|
+
var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
8961
9524
|
var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$2 || (_templateObject12$2 = /*#__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);
|
|
8962
9525
|
var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8963
9526
|
var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -8981,13 +9544,13 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_temp
|
|
|
8981
9544
|
var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
8982
9545
|
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);
|
|
8983
9546
|
|
|
8984
|
-
var _excluded$
|
|
8985
|
-
_excluded2$
|
|
9547
|
+
var _excluded$q = ["text"],
|
|
9548
|
+
_excluded2$3 = ["text"],
|
|
8986
9549
|
_excluded3 = ["text"];
|
|
8987
|
-
var _buttonTypeToButton$
|
|
9550
|
+
var _buttonTypeToButton$2;
|
|
8988
9551
|
var LENGTH_TEXT$1 = 28;
|
|
8989
9552
|
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
8990
|
-
var buttonTypeToButton$
|
|
9553
|
+
var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
|
|
8991
9554
|
var PromoWithTags = function PromoWithTags(_ref) {
|
|
8992
9555
|
var _ref$imagePosition = _ref.imagePosition,
|
|
8993
9556
|
imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
|
|
@@ -9044,17 +9607,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9044
9607
|
var _ref2 = firstButton || {},
|
|
9045
9608
|
_ref2$text = _ref2.text,
|
|
9046
9609
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9047
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9610
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
|
|
9048
9611
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
9049
9612
|
var secondButton = links == null ? void 0 : links[1];
|
|
9050
9613
|
var _ref3 = secondButton || {},
|
|
9051
9614
|
_ref3$text = _ref3.text,
|
|
9052
9615
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
9053
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
9616
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
|
|
9054
9617
|
var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
|
|
9055
9618
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
9056
|
-
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$
|
|
9057
|
-
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$
|
|
9619
|
+
var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
|
|
9620
|
+
var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$2[secondButton.buttonType] : TertiaryButton;
|
|
9058
9621
|
var textLinkItems = textLinks ? textLinks.map(function (link, index) {
|
|
9059
9622
|
var _link$text = link.text,
|
|
9060
9623
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
@@ -9157,28 +9720,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9157
9720
|
}))));
|
|
9158
9721
|
};
|
|
9159
9722
|
|
|
9160
|
-
var _templateObject$
|
|
9723
|
+
var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$f;
|
|
9161
9724
|
var LENGTH_TEXT$2 = 28;
|
|
9162
9725
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9163
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9726
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$16 || (_templateObject$16 = /*#__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) {
|
|
9164
9727
|
var imageToLeft = _ref.imageToLeft;
|
|
9165
9728
|
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'";
|
|
9166
9729
|
}, devices.tablet, function (_ref2) {
|
|
9167
9730
|
var imageToLeft = _ref2.imageToLeft;
|
|
9168
9731
|
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'";
|
|
9169
9732
|
}, devices.mobile);
|
|
9170
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9733
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
9171
9734
|
var imageToLeft = _ref3.imageToLeft;
|
|
9172
9735
|
return imageToLeft ? 'left' : 'right';
|
|
9173
9736
|
}, devices.mobile);
|
|
9174
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
9737
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__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) {
|
|
9175
9738
|
var imageToLeft = _ref4.imageToLeft;
|
|
9176
9739
|
return imageToLeft ? 'right' : 'left';
|
|
9177
9740
|
}, devices.mobile);
|
|
9178
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
9741
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__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);
|
|
9179
9742
|
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$r || (_templateObject5$r = /*#__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"])));
|
|
9180
|
-
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$
|
|
9181
|
-
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$
|
|
9743
|
+
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$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 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"])));
|
|
9744
|
+
var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__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) {
|
|
9182
9745
|
var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
|
|
9183
9746
|
primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
|
|
9184
9747
|
_ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
|
|
@@ -9200,8 +9763,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$e || (_templat
|
|
|
9200
9763
|
return '';
|
|
9201
9764
|
});
|
|
9202
9765
|
|
|
9203
|
-
var _templateObject$
|
|
9204
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9766
|
+
var _templateObject$17;
|
|
9767
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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) {
|
|
9205
9768
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9206
9769
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9207
9770
|
return aspectRatio;
|
|
@@ -9232,19 +9795,6 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
9232
9795
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
9233
9796
|
};
|
|
9234
9797
|
|
|
9235
|
-
/**
|
|
9236
|
-
* Generates a random string in the format XXX-XXX.
|
|
9237
|
-
* Does not meet UUID standards.
|
|
9238
|
-
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
9239
|
-
*
|
|
9240
|
-
* @return {string} A random string in the format XXX-XXX.
|
|
9241
|
-
*/
|
|
9242
|
-
var generateDomElementId = function generateDomElementId() {
|
|
9243
|
-
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
9244
|
-
var datePart = Date.now().toString().slice(-3);
|
|
9245
|
-
return randomPart + "-" + datePart;
|
|
9246
|
-
};
|
|
9247
|
-
|
|
9248
9798
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
9249
9799
|
var video = _ref.video,
|
|
9250
9800
|
settings = _ref.settings;
|
|
@@ -9326,8 +9876,8 @@ var PromoChild = function PromoChild(_ref) {
|
|
|
9326
9876
|
}));
|
|
9327
9877
|
};
|
|
9328
9878
|
|
|
9329
|
-
var _excluded$
|
|
9330
|
-
_excluded2$
|
|
9879
|
+
var _excluded$r = ["text"],
|
|
9880
|
+
_excluded2$4 = ["text"];
|
|
9331
9881
|
var LENGTH_TEXT$3 = 28;
|
|
9332
9882
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
9333
9883
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -9352,13 +9902,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9352
9902
|
var _ref2 = primaryButton || {},
|
|
9353
9903
|
_ref2$text = _ref2.text,
|
|
9354
9904
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
9355
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
9905
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
|
|
9356
9906
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
9357
9907
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
9358
9908
|
var _ref3 = tertiaryButton || {},
|
|
9359
9909
|
_ref3$text = _ref3.text,
|
|
9360
9910
|
tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
9361
|
-
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$
|
|
9911
|
+
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
|
|
9362
9912
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
|
|
9363
9913
|
var defaultVideoSettings = {
|
|
9364
9914
|
muted: true,
|
|
@@ -9395,8 +9945,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9395
9945
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
9396
9946
|
};
|
|
9397
9947
|
|
|
9398
|
-
var _templateObject$
|
|
9399
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9948
|
+
var _templateObject$18;
|
|
9949
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9400
9950
|
|
|
9401
9951
|
/**
|
|
9402
9952
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9451,9 +10001,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9451
10001
|
})));
|
|
9452
10002
|
};
|
|
9453
10003
|
|
|
9454
|
-
var _templateObject$
|
|
9455
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9456
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10004
|
+
var _templateObject$19, _templateObject2$T, _templateObject3$F;
|
|
10005
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10006
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9457
10007
|
var horizontalMode = _ref.horizontalMode;
|
|
9458
10008
|
if (horizontalMode) return 'row';
|
|
9459
10009
|
return 'column';
|
|
@@ -9461,7 +10011,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
|
|
|
9461
10011
|
var gap = _ref2.gap;
|
|
9462
10012
|
return gap + "px";
|
|
9463
10013
|
});
|
|
9464
|
-
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10014
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9465
10015
|
var darkMode = _ref3.darkMode;
|
|
9466
10016
|
if (darkMode) return 'var(--base-color-white)';
|
|
9467
10017
|
return 'var(--base-color-errorstate)';
|
|
@@ -9538,10 +10088,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9538
10088
|
}, error))));
|
|
9539
10089
|
};
|
|
9540
10090
|
|
|
9541
|
-
var _templateObject$
|
|
9542
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9543
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9544
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10091
|
+
var _templateObject$1a, _templateObject2$U, _templateObject3$G;
|
|
10092
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__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);
|
|
10093
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__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"])));
|
|
10094
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__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);
|
|
9545
10095
|
|
|
9546
10096
|
/* eslint-disable react/no-danger */
|
|
9547
10097
|
var StatusBanner = function StatusBanner(_ref) {
|
|
@@ -9597,8 +10147,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9597
10147
|
return null;
|
|
9598
10148
|
};
|
|
9599
10149
|
|
|
9600
|
-
var _templateObject$
|
|
9601
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10150
|
+
var _templateObject$1b;
|
|
10151
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__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);
|
|
9602
10152
|
|
|
9603
10153
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9604
10154
|
var title = _ref.title,
|
|
@@ -9626,8 +10176,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9626
10176
|
}, description)))));
|
|
9627
10177
|
};
|
|
9628
10178
|
|
|
9629
|
-
var _templateObject$
|
|
9630
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
10179
|
+
var _templateObject$1c, _templateObject2$V, _templateObject3$H, _templateObject4$z, _templateObject5$s, _templateObject6$m, _templateObject7$g, _templateObject8$b, _templateObject9$7, _templateObject10$7, _templateObject11$4;
|
|
10180
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1c || (_templateObject$1c = /*#__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) {
|
|
9631
10181
|
var theme = _ref.theme;
|
|
9632
10182
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9633
10183
|
}, function (_ref2) {
|
|
@@ -9637,12 +10187,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /
|
|
|
9637
10187
|
var theme = _ref3.theme;
|
|
9638
10188
|
return theme.colors.lightgrey;
|
|
9639
10189
|
});
|
|
9640
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
10190
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9641
10191
|
var theme = _ref4.theme;
|
|
9642
10192
|
return theme.colors.darkgrey;
|
|
9643
10193
|
});
|
|
9644
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9645
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
10194
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
10195
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9646
10196
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9647
10197
|
var theme = _ref5.theme;
|
|
9648
10198
|
return {
|
|
@@ -9651,10 +10201,10 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9651
10201
|
title: 'Select Arrow'
|
|
9652
10202
|
};
|
|
9653
10203
|
})(_templateObject5$s || (_templateObject5$s = /*#__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"])));
|
|
9654
|
-
var Wrapper$
|
|
9655
|
-
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$
|
|
9656
|
-
var Options = /*#__PURE__*/styled.div(_templateObject8$
|
|
9657
|
-
var Option = /*#__PURE__*/styled.li(_templateObject9$
|
|
10204
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
10205
|
+
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
10206
|
+
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
10207
|
+
var Option = /*#__PURE__*/styled.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
9658
10208
|
var theme = _ref6.theme,
|
|
9659
10209
|
hover = _ref6.hover;
|
|
9660
10210
|
var _theme$colors = theme.colors,
|
|
@@ -9664,9 +10214,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 =
|
|
|
9664
10214
|
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
9665
10215
|
});
|
|
9666
10216
|
var selectStyles = function selectStyles(width, height) {
|
|
9667
|
-
return css(_templateObject10$
|
|
10217
|
+
return css(_templateObject10$7 || (_templateObject10$7 = _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);
|
|
9668
10218
|
};
|
|
9669
|
-
var SelectList = /*#__PURE__*/styled.ul(_templateObject11$
|
|
10219
|
+
var SelectList = /*#__PURE__*/styled.ul(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
9670
10220
|
var width = _ref7.width,
|
|
9671
10221
|
height = _ref7.height;
|
|
9672
10222
|
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
@@ -9960,7 +10510,7 @@ function Select(_ref3) {
|
|
|
9960
10510
|
}
|
|
9961
10511
|
setSelectedValue(options[0]);
|
|
9962
10512
|
}, [options, resetWhenOptionsUpdate]);
|
|
9963
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10513
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
|
|
9964
10514
|
level: 1,
|
|
9965
10515
|
tag: "p",
|
|
9966
10516
|
"data-testid": "select-label"
|
|
@@ -10007,9 +10557,9 @@ function Select(_ref3) {
|
|
|
10007
10557
|
})))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10008
10558
|
}
|
|
10009
10559
|
|
|
10010
|
-
var _templateObject$
|
|
10011
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10012
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10560
|
+
var _templateObject$1d, _templateObject2$W, _templateObject3$I, _templateObject4$A;
|
|
10561
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10562
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__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) {
|
|
10013
10563
|
var width = _ref.width;
|
|
10014
10564
|
if (!width) return 'none';
|
|
10015
10565
|
return width + "px";
|
|
@@ -10026,18 +10576,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateOb
|
|
|
10026
10576
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
10027
10577
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
10028
10578
|
});
|
|
10029
|
-
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10579
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
10030
10580
|
var darkMode = _ref5.darkMode;
|
|
10031
10581
|
if (darkMode) return "var(--base-color-white)";
|
|
10032
10582
|
return "var(--base-color-black)";
|
|
10033
10583
|
});
|
|
10034
|
-
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10584
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
10035
10585
|
var darkMode = _ref6.darkMode;
|
|
10036
10586
|
if (darkMode) return "var(--base-color-white)";
|
|
10037
10587
|
return "var(--base-color-errorstate)";
|
|
10038
10588
|
});
|
|
10039
10589
|
|
|
10040
|
-
var _excluded$
|
|
10590
|
+
var _excluded$s = ["label", "error", "width", "darkMode", "isSearchable", "components"];
|
|
10041
10591
|
var DropdownIndicator = function DropdownIndicator(props) {
|
|
10042
10592
|
return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
10043
10593
|
iconName: "DropdownArrow"
|
|
@@ -10088,7 +10638,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10088
10638
|
_ref2$isSearchable = _ref2.isSearchable,
|
|
10089
10639
|
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
10090
10640
|
components = _ref2.components,
|
|
10091
|
-
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$
|
|
10641
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
|
|
10092
10642
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10093
10643
|
label: label,
|
|
10094
10644
|
error: error,
|
|
@@ -10106,7 +10656,7 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
10106
10656
|
})));
|
|
10107
10657
|
};
|
|
10108
10658
|
|
|
10109
|
-
var _excluded$
|
|
10659
|
+
var _excluded$t = ["label", "error", "width", "darkMode", "components"];
|
|
10110
10660
|
/**
|
|
10111
10661
|
* The Select2Async component is similar to Select 2, but uses react-select async
|
|
10112
10662
|
* component for select instead of regular react-select component. This can be used
|
|
@@ -10128,7 +10678,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10128
10678
|
_ref$darkMode = _ref.darkMode,
|
|
10129
10679
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
10130
10680
|
components = _ref.components,
|
|
10131
|
-
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$
|
|
10681
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
|
|
10132
10682
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
10133
10683
|
label: label,
|
|
10134
10684
|
error: error,
|
|
@@ -10145,8 +10695,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10145
10695
|
})));
|
|
10146
10696
|
};
|
|
10147
10697
|
|
|
10148
|
-
var _templateObject$
|
|
10149
|
-
var Wrapper$
|
|
10698
|
+
var _templateObject$1e, _templateObject2$X;
|
|
10699
|
+
var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1e || (_templateObject$1e = /*#__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) {
|
|
10150
10700
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10151
10701
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10152
10702
|
return aspectRatio;
|
|
@@ -10156,7 +10706,7 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
|
|
|
10156
10706
|
height = _ref2.height;
|
|
10157
10707
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
10158
10708
|
});
|
|
10159
|
-
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$
|
|
10709
|
+
var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$X || (_templateObject2$X = /*#__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"])));
|
|
10160
10710
|
|
|
10161
10711
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
10162
10712
|
var caption = _ref.caption,
|
|
@@ -10177,7 +10727,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10177
10727
|
return window.removeEventListener('resize', setWrapperHeight);
|
|
10178
10728
|
};
|
|
10179
10729
|
}, []);
|
|
10180
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10730
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$7, {
|
|
10181
10731
|
aspectRatio: aspectRatio,
|
|
10182
10732
|
ref: wrapperRef,
|
|
10183
10733
|
height: height
|
|
@@ -10190,13 +10740,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10190
10740
|
})), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
10191
10741
|
};
|
|
10192
10742
|
|
|
10193
|
-
var _templateObject$
|
|
10194
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
10195
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10743
|
+
var _templateObject$1f, _templateObject2$Y, _templateObject3$J;
|
|
10744
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10745
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
10196
10746
|
var displayAttribution = _ref.displayAttribution;
|
|
10197
10747
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
10198
10748
|
});
|
|
10199
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10749
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__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);
|
|
10200
10750
|
|
|
10201
10751
|
/* eslint-disable react/no-danger */
|
|
10202
10752
|
var Quote = function Quote(_ref) {
|
|
@@ -10221,13 +10771,13 @@ var Quote = function Quote(_ref) {
|
|
|
10221
10771
|
}, attribution))));
|
|
10222
10772
|
};
|
|
10223
10773
|
|
|
10224
|
-
var _templateObject$
|
|
10225
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10226
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
10227
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
10228
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
10774
|
+
var _templateObject$1g, _templateObject2$Z, _templateObject3$K, _templateObject4$B, _templateObject5$t, _templateObject6$n;
|
|
10775
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__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"])));
|
|
10776
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10777
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10778
|
+
var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10229
10779
|
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__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);
|
|
10230
|
-
var TitleWrapper$
|
|
10780
|
+
var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__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);
|
|
10231
10781
|
|
|
10232
10782
|
var MiniCard = function MiniCard(_ref) {
|
|
10233
10783
|
var _ref$title = _ref.title,
|
|
@@ -10245,7 +10795,7 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10245
10795
|
columnSpanDevice: 3,
|
|
10246
10796
|
columnStartDesktop: 1,
|
|
10247
10797
|
columnSpanDesktop: 3
|
|
10248
|
-
}, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10798
|
+
}, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
|
|
10249
10799
|
aspectRatio: AspectRatio['4:3']
|
|
10250
10800
|
}, /*#__PURE__*/React__default.createElement(StyledImage, {
|
|
10251
10801
|
src: image,
|
|
@@ -10260,19 +10810,19 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10260
10810
|
columnSpanDesktop: 4
|
|
10261
10811
|
}, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10262
10812
|
level: 4
|
|
10263
|
-
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$
|
|
10813
|
+
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$3, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10264
10814
|
level: 2
|
|
10265
10815
|
}, title)))));
|
|
10266
10816
|
};
|
|
10267
10817
|
|
|
10268
|
-
var _templateObject$
|
|
10269
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10270
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
10271
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
10818
|
+
var _templateObject$1h, _templateObject2$_, _templateObject3$L, _templateObject4$C, _templateObject5$u;
|
|
10819
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__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"])));
|
|
10820
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__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"])));
|
|
10821
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10272
10822
|
var isVisible = _ref.isVisible;
|
|
10273
10823
|
return isVisible ? 'visible' : 'hidden';
|
|
10274
10824
|
});
|
|
10275
|
-
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
10825
|
+
var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
|
|
10276
10826
|
var isVisible = _ref2.isVisible;
|
|
10277
10827
|
return isVisible ? 'visible' : 'hidden';
|
|
10278
10828
|
});
|
|
@@ -10357,11 +10907,11 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10357
10907
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText))));
|
|
10358
10908
|
};
|
|
10359
10909
|
|
|
10360
|
-
var _templateObject$
|
|
10361
|
-
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$
|
|
10362
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2
|
|
10363
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$
|
|
10364
|
-
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$
|
|
10910
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v;
|
|
10911
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10912
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$$ || (_templateObject2$$ = /*#__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);
|
|
10913
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__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);
|
|
10914
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$D || (_templateObject4$D = /*#__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) {
|
|
10365
10915
|
var isActive = _ref.isActive;
|
|
10366
10916
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10367
10917
|
}, Colors.MidGrey);
|
|
@@ -10521,19 +11071,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10521
11071
|
});
|
|
10522
11072
|
};
|
|
10523
11073
|
|
|
10524
|
-
var _templateObject$
|
|
10525
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
10526
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$
|
|
10527
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$
|
|
11074
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w, _templateObject6$o;
|
|
11075
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
11076
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
11077
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10528
11078
|
var color = _ref.color;
|
|
10529
11079
|
return "var(--base-color-" + color + ")";
|
|
10530
11080
|
});
|
|
10531
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
11081
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10532
11082
|
var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10533
11083
|
var color = _ref2.color;
|
|
10534
11084
|
return "var(--base-color-" + color + ")";
|
|
10535
11085
|
});
|
|
10536
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$
|
|
11086
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10537
11087
|
var color = _ref3.color;
|
|
10538
11088
|
return "var(--base-color-" + color + ")";
|
|
10539
11089
|
});
|
|
@@ -10615,11 +11165,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10615
11165
|
}, strengthLabel))));
|
|
10616
11166
|
};
|
|
10617
11167
|
|
|
10618
|
-
var _templateObject$
|
|
10619
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$
|
|
10620
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2
|
|
10621
|
-
var Wrapper$
|
|
10622
|
-
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$
|
|
11168
|
+
var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject10$8;
|
|
11169
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
11170
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
11171
|
+
var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
11172
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$F || (_templateObject4$F = /*#__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) {
|
|
10623
11173
|
return "var(--base-color-" + props.lineColor + ")";
|
|
10624
11174
|
}, function (props) {
|
|
10625
11175
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
@@ -10629,14 +11179,14 @@ var TableCell = /*#__PURE__*/styled.td(_templateObject5$x || (_templateObject5$x
|
|
|
10629
11179
|
}, function (props) {
|
|
10630
11180
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10631
11181
|
}, devices.mobile);
|
|
10632
|
-
var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$
|
|
10633
|
-
var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$
|
|
11182
|
+
var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__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"])));
|
|
11183
|
+
var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$h || (_templateObject7$h = /*#__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) {
|
|
10634
11184
|
var active = _ref.active;
|
|
10635
11185
|
return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
|
|
10636
11186
|
});
|
|
10637
|
-
var Next = /*#__PURE__*/styled.span(_templateObject8$
|
|
10638
|
-
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$
|
|
10639
|
-
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject10$
|
|
11187
|
+
var Next = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__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"])));
|
|
11188
|
+
var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__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"])));
|
|
11189
|
+
var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
|
|
10640
11190
|
|
|
10641
11191
|
/* eslint-disable react/no-danger */
|
|
10642
11192
|
var Content = function Content(_ref) {
|
|
@@ -10744,7 +11294,7 @@ var Table = function Table(_ref) {
|
|
|
10744
11294
|
} else {
|
|
10745
11295
|
visibleRows = totalRows;
|
|
10746
11296
|
}
|
|
10747
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11297
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
|
|
10748
11298
|
onClickPrev: function onClickPrev() {
|
|
10749
11299
|
return scrollTable(tableRef, 'left');
|
|
10750
11300
|
},
|
|
@@ -10819,24 +11369,24 @@ var Table = function Table(_ref) {
|
|
|
10819
11369
|
}))))))))));
|
|
10820
11370
|
};
|
|
10821
11371
|
|
|
10822
|
-
var _templateObject$
|
|
10823
|
-
var Wrapper$
|
|
11372
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q, _templateObject7$i, _templateObject8$d, _templateObject9$9, _templateObject10$9, _templateObject11$5, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
|
|
11373
|
+
var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
|
|
10824
11374
|
var theme = _ref.theme;
|
|
10825
11375
|
return "var(--base-color-" + theme + ")";
|
|
10826
11376
|
}, function (_ref2) {
|
|
10827
11377
|
var theme = _ref2.theme;
|
|
10828
11378
|
return "var(--base-color-" + theme + ")";
|
|
10829
11379
|
});
|
|
10830
|
-
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10831
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
10832
|
-
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
11380
|
+
var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
|
|
11381
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$P || (_templateObject3$P = /*#__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);
|
|
11382
|
+
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
|
|
10833
11383
|
var Form = /*#__PURE__*/styled.form(_templateObject5$y || (_templateObject5$y = /*#__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);
|
|
10834
|
-
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$
|
|
10835
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$
|
|
10836
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$
|
|
10837
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$
|
|
10838
|
-
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$
|
|
10839
|
-
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$
|
|
11384
|
+
var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__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);
|
|
11385
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
|
|
11386
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
|
|
11387
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$9 || (_templateObject9$9 = /*#__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);
|
|
11388
|
+
var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$9 || (_templateObject10$9 = /*#__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);
|
|
11389
|
+
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$5 || (_templateObject11$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
10840
11390
|
var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$3 || (_templateObject12$3 = /*#__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"])));
|
|
10841
11391
|
var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$3 || (_templateObject13$3 = /*#__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) {
|
|
10842
11392
|
var _ref3$isOpen = _ref3.isOpen,
|
|
@@ -11142,7 +11692,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11142
11692
|
});
|
|
11143
11693
|
}
|
|
11144
11694
|
}, [isSuccess]);
|
|
11145
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
11695
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$9, {
|
|
11146
11696
|
theme: themeToColor(theme)
|
|
11147
11697
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
11148
11698
|
id: signUpInstructionsId,
|
|
@@ -11206,8 +11756,70 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11206
11756
|
}))))));
|
|
11207
11757
|
};
|
|
11208
11758
|
|
|
11209
|
-
var
|
|
11210
|
-
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) {
|
|
11759
|
+
var _BUTTONS_STYLE_VALUES;
|
|
11760
|
+
// Text color, Background color, Border color, Hovered color
|
|
11761
|
+
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);
|
|
11762
|
+
|
|
11763
|
+
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";
|
|
11764
|
+
styleInject(css_248z$1);
|
|
11765
|
+
|
|
11766
|
+
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";
|
|
11767
|
+
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
11768
|
+
styleInject(css_248z$2);
|
|
11769
|
+
|
|
11770
|
+
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";
|
|
11771
|
+
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
11772
|
+
styleInject(css_248z$3);
|
|
11773
|
+
|
|
11774
|
+
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";
|
|
11775
|
+
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
11776
|
+
styleInject(css_248z$4);
|
|
11777
|
+
|
|
11778
|
+
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";
|
|
11779
|
+
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
11780
|
+
styleInject(css_248z$5);
|
|
11781
|
+
|
|
11782
|
+
/* eslint-disable react/jsx-no-useless-fragment */
|
|
11783
|
+
var getThemeClass = function getThemeClass(theme) {
|
|
11784
|
+
// Always include the base (core) theme class
|
|
11785
|
+
var baseThemeClass = coreThemeStyles.coreTheme;
|
|
11786
|
+
var overrideClass = '';
|
|
11787
|
+
switch (theme) {
|
|
11788
|
+
case ThemeType.Core:
|
|
11789
|
+
overrideClass = '';
|
|
11790
|
+
break;
|
|
11791
|
+
case ThemeType.Stream:
|
|
11792
|
+
overrideClass = streamThemeStyles.streamTheme;
|
|
11793
|
+
break;
|
|
11794
|
+
case ThemeType.Cinema:
|
|
11795
|
+
overrideClass = cinemaThemeStyles.cinemaTheme;
|
|
11796
|
+
break;
|
|
11797
|
+
case ThemeType.Schools:
|
|
11798
|
+
overrideClass = schoolsThemeStyles.schoolsTheme;
|
|
11799
|
+
break;
|
|
11800
|
+
default:
|
|
11801
|
+
overrideClass = '';
|
|
11802
|
+
}
|
|
11803
|
+
// Return the combined classes
|
|
11804
|
+
return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
|
|
11805
|
+
};
|
|
11806
|
+
var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
11807
|
+
var theme = _ref.theme,
|
|
11808
|
+
children = _ref.children;
|
|
11809
|
+
var themeClass = getThemeClass(theme);
|
|
11810
|
+
// Convert children to an array (assuming they accept a className prop)
|
|
11811
|
+
var childrenArray = React__default.Children.toArray(children);
|
|
11812
|
+
var themedChildren = childrenArray.map(function (child) {
|
|
11813
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
11814
|
+
className: ((child.props.className || '') + " " + themeClass).trim(),
|
|
11815
|
+
theme: theme
|
|
11816
|
+
});
|
|
11817
|
+
});
|
|
11818
|
+
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
11819
|
+
};
|
|
11820
|
+
|
|
11821
|
+
var _templateObject$1m;
|
|
11822
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1m || (_templateObject$1m = /*#__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) {
|
|
11211
11823
|
var theme = _ref.theme;
|
|
11212
11824
|
return theme.colors.primary;
|
|
11213
11825
|
}, function (_ref2) {
|
|
@@ -12154,62 +12766,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templa
|
|
|
12154
12766
|
return theme.footer.tablet.paddingBottom;
|
|
12155
12767
|
}, devices.desktop, devices.largeDesktop);
|
|
12156
12768
|
|
|
12157
|
-
|
|
12158
|
-
styleInject(css_248z$1);
|
|
12159
|
-
|
|
12160
|
-
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";
|
|
12161
|
-
var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
|
|
12162
|
-
styleInject(css_248z$2);
|
|
12163
|
-
|
|
12164
|
-
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";
|
|
12165
|
-
var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
|
|
12166
|
-
styleInject(css_248z$3);
|
|
12167
|
-
|
|
12168
|
-
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";
|
|
12169
|
-
var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
|
|
12170
|
-
styleInject(css_248z$4);
|
|
12171
|
-
|
|
12172
|
-
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";
|
|
12173
|
-
var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
|
|
12174
|
-
styleInject(css_248z$5);
|
|
12175
|
-
|
|
12176
|
-
/* eslint-disable react/jsx-no-useless-fragment */
|
|
12177
|
-
var getThemeClass = function getThemeClass(theme) {
|
|
12178
|
-
// Always include the base (core) theme class
|
|
12179
|
-
var baseThemeClass = coreThemeStyles.coreTheme;
|
|
12180
|
-
var overrideClass = '';
|
|
12181
|
-
switch (theme) {
|
|
12182
|
-
case ThemeType.Core:
|
|
12183
|
-
overrideClass = '';
|
|
12184
|
-
break;
|
|
12185
|
-
case ThemeType.Stream:
|
|
12186
|
-
overrideClass = streamThemeStyles.streamTheme;
|
|
12187
|
-
break;
|
|
12188
|
-
case ThemeType.Cinema:
|
|
12189
|
-
overrideClass = cinemaThemeStyles.cinemaTheme;
|
|
12190
|
-
break;
|
|
12191
|
-
case ThemeType.Schools:
|
|
12192
|
-
overrideClass = schoolsThemeStyles.schoolsTheme;
|
|
12193
|
-
break;
|
|
12194
|
-
default:
|
|
12195
|
-
overrideClass = '';
|
|
12196
|
-
}
|
|
12197
|
-
// Return the combined classes
|
|
12198
|
-
return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
|
|
12199
|
-
};
|
|
12200
|
-
var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
|
|
12201
|
-
var theme = _ref.theme,
|
|
12202
|
-
children = _ref.children;
|
|
12203
|
-
var themeClass = getThemeClass(theme);
|
|
12204
|
-
// Convert children to an array (assuming they accept a className prop)
|
|
12205
|
-
var childrenArray = React__default.Children.toArray(children);
|
|
12206
|
-
var themedChildren = childrenArray.map(function (child) {
|
|
12207
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
12208
|
-
className: ((child.props.className || '') + " " + themeClass).trim()
|
|
12209
|
-
});
|
|
12210
|
-
});
|
|
12211
|
-
return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
|
|
12212
|
-
};
|
|
12213
|
-
|
|
12214
|
-
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, IInformationBackgroundColour, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, 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, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
12769
|
+
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, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, 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, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
12215
12770
|
//# sourceMappingURL=harmonic.esm.js.map
|