@royaloperahouse/chord 2.3.0 → 2.3.1-b-chord-development
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +213 -7
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +648 -405
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +648 -407
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Grid/GridItemLegacy.d.ts +8 -0
- package/dist/components/atoms/Grid/index.d.ts +2 -1
- package/dist/components/atoms/TextField/TextFieldLegacy.d.ts +8 -0
- package/dist/components/atoms/TextField/TextFieldLegacy.style.d.ts +5 -0
- package/dist/components/atoms/TextField/index.d.ts +2 -1
- package/dist/components/atoms/index.d.ts +3 -3
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/AuxiliaryNav/AuxiliaryNav.styles.d.ts +7 -8
- package/dist/components/molecules/PageHeading/index.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
- package/dist/components/molecules/PromoWithTitle/PromoChild.d.ts +2 -2
- package/dist/components/molecules/index.d.ts +1 -1
- package/dist/helpers/generateId.d.ts +1 -0
- package/dist/index.d.ts +3 -2
- package/dist/types/auxiliaryNav.d.ts +20 -2
- package/dist/types/editorial.d.ts +2 -2
- package/dist/types/formTypes.d.ts +12 -9
- package/dist/types/impactHeader.d.ts +4 -0
- package/dist/types/types.d.ts +2 -1
- package/package.json +1 -1
- package/README.GIT +0 -277
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
|
|
1
|
+
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
@@ -2628,7 +2628,39 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
|
|
|
2628
2628
|
});
|
|
2629
2629
|
|
|
2630
2630
|
var _templateObject$b;
|
|
2631
|
-
|
|
2631
|
+
/**
|
|
2632
|
+
* # IMPORTANT
|
|
2633
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
2634
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
2635
|
+
*/
|
|
2636
|
+
|
|
2637
|
+
var GridItemLegacy = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", " / span\n ", ";\n\n @media ", " {\n & {\n grid-column: ", " /\n span ", ";\n }\n }\n\n @media ", " {\n & {\n grid-column: ", " / span\n ", ";\n }\n }\n"])), function (_ref) {
|
|
2638
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
2639
|
+
return columnStartDesktop;
|
|
2640
|
+
}, function (_ref2) {
|
|
2641
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
2642
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
2643
|
+
return columnSpanDesktop;
|
|
2644
|
+
}, devices.mobile, function (_ref3) {
|
|
2645
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
2646
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
2647
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
2648
|
+
}, function (_ref4) {
|
|
2649
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
2650
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
2651
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
2652
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
2653
|
+
}, devices.tablet, function (_ref5) {
|
|
2654
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
2655
|
+
return columnStartDevice;
|
|
2656
|
+
}, function (_ref6) {
|
|
2657
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
2658
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
2659
|
+
return columnSpanDevice;
|
|
2660
|
+
});
|
|
2661
|
+
|
|
2662
|
+
var _templateObject$c;
|
|
2663
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\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) {
|
|
2632
2664
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2633
2665
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2634
2666
|
return aspectRatio;
|
|
@@ -2646,8 +2678,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
|
|
|
2646
2678
|
return aspectRatio;
|
|
2647
2679
|
});
|
|
2648
2680
|
|
|
2649
|
-
var _templateObject$
|
|
2650
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
2681
|
+
var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
2682
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
2651
2683
|
var height = _ref.height;
|
|
2652
2684
|
return height ? height + "px" : '6px';
|
|
2653
2685
|
});
|
|
@@ -2730,13 +2762,13 @@ var Progress = function Progress(_ref) {
|
|
|
2730
2762
|
}, renderSteps()));
|
|
2731
2763
|
};
|
|
2732
2764
|
|
|
2733
|
-
var _templateObject$
|
|
2734
|
-
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2765
|
+
var _templateObject$e, _templateObject2$4, _templateObject3$3;
|
|
2766
|
+
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
2735
2767
|
var RadioLine = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
|
|
2736
2768
|
var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
2737
2769
|
|
|
2738
|
-
var _templateObject$
|
|
2739
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2770
|
+
var _templateObject$f;
|
|
2771
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
2740
2772
|
var typography = _ref.typography;
|
|
2741
2773
|
return typography;
|
|
2742
2774
|
}, function (_ref2) {
|
|
@@ -2892,8 +2924,8 @@ var Radio = function Radio(_ref) {
|
|
|
2892
2924
|
}, error)));
|
|
2893
2925
|
};
|
|
2894
2926
|
|
|
2895
|
-
var _templateObject$
|
|
2896
|
-
var Container = /*#__PURE__*/styled.div(_templateObject$
|
|
2927
|
+
var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
2928
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2897
2929
|
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
2898
2930
|
var error = _ref.error,
|
|
2899
2931
|
darkMode = _ref.darkMode,
|
|
@@ -3001,8 +3033,8 @@ var Radio2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3001
3033
|
}, error)));
|
|
3002
3034
|
});
|
|
3003
3035
|
|
|
3004
|
-
var _templateObject$
|
|
3005
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3036
|
+
var _templateObject$h, _templateObject2$6, _templateObject3$5;
|
|
3037
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3006
3038
|
var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
3007
3039
|
var theme = _ref.theme;
|
|
3008
3040
|
return theme.colors.primary;
|
|
@@ -3073,8 +3105,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3073
3105
|
}, renderNextIcon()));
|
|
3074
3106
|
};
|
|
3075
3107
|
|
|
3076
|
-
var _templateObject$
|
|
3077
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3108
|
+
var _templateObject$i;
|
|
3109
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3078
3110
|
var fillColor = _ref.fillColor;
|
|
3079
3111
|
return fillColor;
|
|
3080
3112
|
});
|
|
@@ -3098,8 +3130,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3098
3130
|
})));
|
|
3099
3131
|
};
|
|
3100
3132
|
|
|
3101
|
-
var _templateObject$
|
|
3102
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3133
|
+
var _templateObject$j, _templateObject2$7;
|
|
3134
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3103
3135
|
var Splitter = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3104
3136
|
|
|
3105
3137
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3118,8 +3150,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3118
3150
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3119
3151
|
};
|
|
3120
3152
|
|
|
3121
|
-
var _templateObject$
|
|
3122
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3153
|
+
var _templateObject$k;
|
|
3154
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3123
3155
|
|
|
3124
3156
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3125
3157
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3329,8 +3361,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3329
3361
|
})))));
|
|
3330
3362
|
};
|
|
3331
3363
|
|
|
3332
|
-
var _templateObject$
|
|
3333
|
-
var CustomImage = /*#__PURE__*/styled.img(_templateObject$
|
|
3364
|
+
var _templateObject$l, _templateObject2$8;
|
|
3365
|
+
var CustomImage = /*#__PURE__*/styled.img(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
|
|
3334
3366
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
3335
3367
|
|
|
3336
3368
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3363,8 +3395,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3363
3395
|
}));
|
|
3364
3396
|
};
|
|
3365
3397
|
|
|
3366
|
-
var _templateObject$
|
|
3367
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3398
|
+
var _templateObject$m, _templateObject2$9;
|
|
3399
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
|
|
3368
3400
|
if (props.withIcon === 'left') {
|
|
3369
3401
|
return "margin-left: 5px;";
|
|
3370
3402
|
}
|
|
@@ -3463,8 +3495,8 @@ var Tab = function Tab(_ref) {
|
|
|
3463
3495
|
}));
|
|
3464
3496
|
};
|
|
3465
3497
|
|
|
3466
|
-
var _templateObject$
|
|
3467
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3498
|
+
var _templateObject$n, _templateObject2$a;
|
|
3499
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3468
3500
|
var iconName = _ref.iconName;
|
|
3469
3501
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3470
3502
|
}, function (_ref2) {
|
|
@@ -3515,8 +3547,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3515
3547
|
})) : null, children);
|
|
3516
3548
|
};
|
|
3517
3549
|
|
|
3518
|
-
var _templateObject$
|
|
3519
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3550
|
+
var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3551
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3520
3552
|
var width = _ref.width;
|
|
3521
3553
|
return width ? width + "px;" : '100%;';
|
|
3522
3554
|
}, function (_ref2) {
|
|
@@ -3639,8 +3671,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
3639
3671
|
}, error))));
|
|
3640
3672
|
};
|
|
3641
3673
|
|
|
3642
|
-
var _templateObject$
|
|
3643
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3674
|
+
var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3675
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3644
3676
|
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
3645
3677
|
var width = _ref.width;
|
|
3646
3678
|
if (!width) return 'none';
|
|
@@ -3766,15 +3798,87 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3766
3798
|
}, error)));
|
|
3767
3799
|
});
|
|
3768
3800
|
|
|
3769
|
-
var _templateObject$
|
|
3770
|
-
var
|
|
3801
|
+
var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
3802
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3803
|
+
var textStyles = /*#__PURE__*/css(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
3804
|
+
var theme = _ref.theme;
|
|
3805
|
+
return theme.fonts.desktop.weights.body[1];
|
|
3806
|
+
}, function (_ref2) {
|
|
3807
|
+
var theme = _ref2.theme;
|
|
3808
|
+
return theme.fonts.desktop.sizes.altHeaders[6];
|
|
3809
|
+
}, function (_ref3) {
|
|
3810
|
+
var theme = _ref3.theme;
|
|
3811
|
+
return theme.spacing[7];
|
|
3812
|
+
});
|
|
3813
|
+
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
3814
|
+
var width = _ref4.width;
|
|
3815
|
+
return width ? width + 'px' : '196px';
|
|
3816
|
+
}, function (_ref5) {
|
|
3817
|
+
var theme = _ref5.theme;
|
|
3818
|
+
return theme.colors.darkgrey;
|
|
3819
|
+
}, function (_ref6) {
|
|
3820
|
+
var error = _ref6.error,
|
|
3821
|
+
theme = _ref6.theme;
|
|
3822
|
+
if (!error) return;
|
|
3823
|
+
return "\n border: 1px solid " + theme.colors.error + ";\n ";
|
|
3824
|
+
}, function (_ref7) {
|
|
3825
|
+
var theme = _ref7.theme;
|
|
3826
|
+
return theme.colors.lightgrey;
|
|
3827
|
+
}, function (_ref8) {
|
|
3828
|
+
var darkMode = _ref8.darkMode,
|
|
3829
|
+
theme = _ref8.theme;
|
|
3830
|
+
if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
|
|
3831
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
3832
|
+
});
|
|
3833
|
+
var TextLabel$2 = /*#__PURE__*/styled.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
|
|
3834
|
+
var darkMode = _ref9.darkMode,
|
|
3835
|
+
theme = _ref9.theme;
|
|
3836
|
+
return darkMode ? theme.colors.white : theme.colors.black;
|
|
3837
|
+
});
|
|
3838
|
+
var ErrorLabel$2 = /*#__PURE__*/styled.p(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
|
|
3839
|
+
var darkMode = _ref10.darkMode,
|
|
3840
|
+
theme = _ref10.theme;
|
|
3841
|
+
return darkMode ? theme.colors.white : theme.colors.error;
|
|
3842
|
+
});
|
|
3843
|
+
|
|
3844
|
+
/**
|
|
3845
|
+
* # IMPORTANT
|
|
3846
|
+
* Please use the `<TextField />` component instead of this component if possible.
|
|
3847
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3848
|
+
* */
|
|
3849
|
+
|
|
3850
|
+
var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
3851
|
+
var label = _ref.label,
|
|
3852
|
+
error = _ref.error,
|
|
3853
|
+
_ref$darkMode = _ref.darkMode,
|
|
3854
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3855
|
+
width = _ref.width,
|
|
3856
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
|
|
3857
|
+
|
|
3858
|
+
return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3859
|
+
darkMode: darkMode,
|
|
3860
|
+
"data-testid": "text-field-text-label"
|
|
3861
|
+
}, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
|
|
3862
|
+
type: "text",
|
|
3863
|
+
error: error,
|
|
3864
|
+
darkMode: darkMode,
|
|
3865
|
+
"data-testid": "text-field-input",
|
|
3866
|
+
width: width
|
|
3867
|
+
}, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3868
|
+
darkMode: darkMode,
|
|
3869
|
+
"data-testid": "text-field-error-label"
|
|
3870
|
+
}, error) : null);
|
|
3871
|
+
};
|
|
3872
|
+
|
|
3873
|
+
var _templateObject$r, _templateObject2$e;
|
|
3874
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
3771
3875
|
var iconName = _ref.iconName;
|
|
3772
3876
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3773
3877
|
}, function (_ref2) {
|
|
3774
3878
|
var color = _ref2.color;
|
|
3775
3879
|
return color;
|
|
3776
3880
|
});
|
|
3777
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3881
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3778
3882
|
|
|
3779
3883
|
var TextLink = function TextLink(_ref) {
|
|
3780
3884
|
var children = _ref.children,
|
|
@@ -3796,20 +3900,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3796
3900
|
})) : null);
|
|
3797
3901
|
};
|
|
3798
3902
|
|
|
3799
|
-
var _templateObject$
|
|
3800
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3903
|
+
var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3904
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 10px;\n margin-top: 140px;\n display: grid;\n grid-template-columns: repeat(2, auto);\n font-family: var(--font-family-header);\n font-size: ", ";\n color: ", ";\n width: auto;\n margin: auto;\n"])), function (_ref) {
|
|
3801
3905
|
var fontSize = _ref.fontSize;
|
|
3802
3906
|
return fontSize + 'px';
|
|
3803
3907
|
}, function (_ref2) {
|
|
3804
3908
|
var color = _ref2.color;
|
|
3805
3909
|
return color;
|
|
3806
3910
|
});
|
|
3807
|
-
var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$
|
|
3808
|
-
var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$
|
|
3911
|
+
var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 10px;\n font-weight: 500;\n letter-spacing: 1px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
|
|
3912
|
+
var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-right: 1px solid ", ";\n padding-right: 10px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n"])), function (_ref3) {
|
|
3809
3913
|
var color = _ref3.color;
|
|
3810
3914
|
return color;
|
|
3811
3915
|
});
|
|
3812
|
-
var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$
|
|
3916
|
+
var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3813
3917
|
|
|
3814
3918
|
var TextLogoProduct;
|
|
3815
3919
|
|
|
@@ -3831,12 +3935,12 @@ var Logo = function Logo(_ref) {
|
|
|
3831
3935
|
}, /*#__PURE__*/createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/createElement(LogoRightSide, null, productName));
|
|
3832
3936
|
};
|
|
3833
3937
|
|
|
3834
|
-
var _templateObject$
|
|
3835
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
3938
|
+
var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7;
|
|
3939
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3836
3940
|
var dark = _ref.dark;
|
|
3837
3941
|
return dark ? 'white' : 'errorstate';
|
|
3838
3942
|
});
|
|
3839
|
-
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$
|
|
3943
|
+
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
3840
3944
|
var dark = _ref2.dark,
|
|
3841
3945
|
disabled = _ref2.disabled;
|
|
3842
3946
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3845,7 +3949,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$f || (_templateO
|
|
|
3845
3949
|
var disabled = _ref3.disabled;
|
|
3846
3950
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3847
3951
|
}, devices.mobileAndTablet);
|
|
3848
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$
|
|
3952
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
3849
3953
|
var dark = _ref4.dark,
|
|
3850
3954
|
disabled = _ref4.disabled,
|
|
3851
3955
|
error = _ref4.error;
|
|
@@ -3861,7 +3965,7 @@ var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$9 || (_template
|
|
|
3861
3965
|
dark = _ref6.dark;
|
|
3862
3966
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3863
3967
|
}, devices.mobile);
|
|
3864
|
-
var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$
|
|
3968
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(\n --base-color-", "\n );\n & svg {\n display: block;\n path {\n fill: var(\n --base-color-", "\n );\n }\n }\n }\n"])), TickboxCheckmark, function (_ref7) {
|
|
3865
3969
|
var dark = _ref7.dark,
|
|
3866
3970
|
whiteBox = _ref7.whiteBox,
|
|
3867
3971
|
disabled = _ref7.disabled;
|
|
@@ -3953,9 +4057,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3953
4057
|
}, error)));
|
|
3954
4058
|
};
|
|
3955
4059
|
|
|
3956
|
-
var _templateObject$
|
|
3957
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
3958
|
-
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
4060
|
+
var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
|
|
4061
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4062
|
+
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3959
4063
|
var error = _ref.error,
|
|
3960
4064
|
darkMode = _ref.darkMode,
|
|
3961
4065
|
disabled = _ref.disabled;
|
|
@@ -3978,7 +4082,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$
|
|
|
3978
4082
|
if (blackBox) return 'var(--base-color-white)';
|
|
3979
4083
|
return ' var(--base-color-black)';
|
|
3980
4084
|
});
|
|
3981
|
-
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$
|
|
4085
|
+
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
3982
4086
|
var blackBox = _ref4.blackBox,
|
|
3983
4087
|
darkMode = _ref4.darkMode;
|
|
3984
4088
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -3989,8 +4093,8 @@ var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$a || (_templateO
|
|
|
3989
4093
|
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3990
4094
|
return '3px solid var(--base-color-lapislazuli)';
|
|
3991
4095
|
});
|
|
3992
|
-
var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$
|
|
3993
|
-
var TextLabel$
|
|
4096
|
+
var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n svg {\n font-size: 12px;\n width: 1em;\n height: 1em;\n fill: currentColor;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n input[type='checkbox']:checked + ", " & {\n display: block;\n }\n"])), Tickbox$1);
|
|
4097
|
+
var TextLabel$3 = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3994
4098
|
var darkMode = _ref6.darkMode,
|
|
3995
4099
|
disabled = _ref6.disabled;
|
|
3996
4100
|
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
@@ -3998,7 +4102,7 @@ var TextLabel$2 = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject
|
|
|
3998
4102
|
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3999
4103
|
return 'var(--base-color-black)';
|
|
4000
4104
|
});
|
|
4001
|
-
var ErrorLabel$
|
|
4105
|
+
var ErrorLabel$3 = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
4002
4106
|
var darkMode = _ref7.darkMode;
|
|
4003
4107
|
if (darkMode) return 'var(--base-color-white)';
|
|
4004
4108
|
return 'var(--base-color-errorstate)';
|
|
@@ -4050,13 +4154,13 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4050
4154
|
blackBox: blackBox
|
|
4051
4155
|
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4052
4156
|
iconName: "Tick"
|
|
4053
|
-
}))), /*#__PURE__*/React__default.createElement(TextLabel$
|
|
4157
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
4054
4158
|
disabled: disabled,
|
|
4055
4159
|
darkMode: darkMode,
|
|
4056
4160
|
"data-testid": "tickbox-content"
|
|
4057
4161
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4058
4162
|
level: 1
|
|
4059
|
-
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
4163
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
4060
4164
|
darkMode: darkMode,
|
|
4061
4165
|
"data-testid": "tickbox-error-label"
|
|
4062
4166
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -4064,18 +4168,18 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4064
4168
|
}, error)));
|
|
4065
4169
|
});
|
|
4066
4170
|
|
|
4067
|
-
var _templateObject$
|
|
4068
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4171
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4172
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4069
4173
|
var color = _ref.color;
|
|
4070
4174
|
return color;
|
|
4071
4175
|
});
|
|
4072
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$
|
|
4176
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__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) {
|
|
4073
4177
|
var color = _ref2.color;
|
|
4074
4178
|
return color;
|
|
4075
4179
|
}, devices.mobileAndTablet);
|
|
4076
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4077
|
-
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4078
|
-
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$
|
|
4180
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4181
|
+
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
|
|
4182
|
+
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
|
|
4079
4183
|
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
4080
4184
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4081
4185
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -4173,8 +4277,8 @@ var Timer = function Timer(_ref) {
|
|
|
4173
4277
|
}));
|
|
4174
4278
|
};
|
|
4175
4279
|
|
|
4176
|
-
var _templateObject$
|
|
4177
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4280
|
+
var _templateObject$w;
|
|
4281
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\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"])));
|
|
4178
4282
|
|
|
4179
4283
|
var TypeTags = function TypeTags(_ref) {
|
|
4180
4284
|
var list = _ref.list;
|
|
@@ -4916,12 +5020,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
4916
5020
|
}
|
|
4917
5021
|
});
|
|
4918
5022
|
|
|
4919
|
-
var _templateObject$
|
|
4920
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
4921
|
-
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
4922
|
-
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4923
|
-
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4924
|
-
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
5023
|
+
var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5024
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
5025
|
+
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
5026
|
+
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5027
|
+
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
5028
|
+
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4925
5029
|
var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4926
5030
|
var VideoMute = /*#__PURE__*/styled.button(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 17px;\n height: 17px;\n background: none;\n border: none;\n padding: 0;\n svg {\n width: 100%;\n height: 100%;\n }\n cursor: pointer;\n"])));
|
|
4927
5031
|
var thumbStyles = /*#__PURE__*/css(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n appearance: none;\n border: none;\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: #ffffff;\n border: none;\n transform: translateY(-25%);\n"])));
|
|
@@ -5124,13 +5228,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5124
5228
|
})));
|
|
5125
5229
|
};
|
|
5126
5230
|
|
|
5127
|
-
var _templateObject$
|
|
5128
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5129
|
-
var StepperError = /*#__PURE__*/styled.div(_templateObject2$
|
|
5231
|
+
var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
|
|
5232
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5233
|
+
var StepperError = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
5130
5234
|
var darkMode = _ref.darkMode;
|
|
5131
5235
|
return darkMode ? 'white' : 'errorstate';
|
|
5132
5236
|
});
|
|
5133
|
-
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$
|
|
5237
|
+
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
5134
5238
|
var darkMode = _ref2.darkMode,
|
|
5135
5239
|
disabled = _ref2.disabled,
|
|
5136
5240
|
error = _ref2.error;
|
|
@@ -5152,11 +5256,11 @@ var StepperBox = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3
|
|
|
5152
5256
|
var disabled = _ref6.disabled;
|
|
5153
5257
|
return disabled ? 'midgrey' : 'black';
|
|
5154
5258
|
});
|
|
5155
|
-
var StepperValue = /*#__PURE__*/styled.input(_templateObject4$
|
|
5259
|
+
var StepperValue = /*#__PURE__*/styled.input(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 51px;\n border: 0;\n text-align: center;\n font-family: var(--font-family-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n background-color: transparent;\n cursor: ", ";\n"])), function (_ref7) {
|
|
5156
5260
|
var disabled = _ref7.disabled;
|
|
5157
5261
|
return disabled ? 'not-allowed' : 'text';
|
|
5158
5262
|
});
|
|
5159
|
-
var StepperButton = /*#__PURE__*/styled.div(_templateObject5$
|
|
5263
|
+
var StepperButton = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n span {\n display: flex;\n justify-content: center;\n }\n\n svg {\n width: 40%;\n height: auto;\n }\n"])), function (_ref8) {
|
|
5160
5264
|
var disabled = _ref8.disabled;
|
|
5161
5265
|
return disabled ? 'not-allowed' : 'pointer';
|
|
5162
5266
|
});
|
|
@@ -5352,18 +5456,18 @@ var Component = function Component(_ref) {
|
|
|
5352
5456
|
}, error)));
|
|
5353
5457
|
};
|
|
5354
5458
|
|
|
5355
|
-
var _templateObject$
|
|
5356
|
-
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5459
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5460
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5357
5461
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5358
5462
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5359
5463
|
});
|
|
5360
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5361
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
5362
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$
|
|
5464
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
5465
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
5466
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref2) {
|
|
5363
5467
|
var visible = _ref2.visible;
|
|
5364
5468
|
return visible ? 'visible' : 'hidden';
|
|
5365
5469
|
}, zIndexes.search, devices.mobile);
|
|
5366
|
-
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
5470
|
+
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n height: 100px;\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref3) {
|
|
5367
5471
|
var visible = _ref3.visible;
|
|
5368
5472
|
return visible ? 'visible' : 'hidden';
|
|
5369
5473
|
}, zIndexes.search, devices.mobile);
|
|
@@ -5377,8 +5481,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
|
|
|
5377
5481
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5378
5482
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
5379
5483
|
|
|
5380
|
-
var _templateObject$
|
|
5381
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5484
|
+
var _templateObject$A;
|
|
5485
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
5382
5486
|
|
|
5383
5487
|
var Logo$1 = function Logo(_ref) {
|
|
5384
5488
|
var _ref$id = _ref.id,
|
|
@@ -5407,11 +5511,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
5407
5511
|
}))));
|
|
5408
5512
|
};
|
|
5409
5513
|
|
|
5410
|
-
var _templateObject$
|
|
5411
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5514
|
+
var _templateObject$B;
|
|
5515
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
5412
5516
|
|
|
5413
|
-
var _templateObject$
|
|
5414
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5517
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$g, _templateObject4$d;
|
|
5518
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5415
5519
|
var selected = _ref.selected,
|
|
5416
5520
|
colorPrimary = _ref.colorPrimary;
|
|
5417
5521
|
|
|
@@ -5439,9 +5543,9 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
|
|
|
5439
5543
|
|
|
5440
5544
|
return '';
|
|
5441
5545
|
});
|
|
5442
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5443
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
5444
|
-
var BasketText = /*#__PURE__*/styled.a(_templateObject4$
|
|
5546
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5547
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
5548
|
+
var BasketText = /*#__PURE__*/styled.a(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
5445
5549
|
|
|
5446
5550
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
5447
5551
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -5599,8 +5703,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5599
5703
|
}, expiryTime ? basketText : text) : ''));
|
|
5600
5704
|
};
|
|
5601
5705
|
|
|
5602
|
-
var _templateObject$
|
|
5603
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5706
|
+
var _templateObject$D, _templateObject2$n;
|
|
5707
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
5604
5708
|
var selected = _ref.selected,
|
|
5605
5709
|
colorPrimary = _ref.colorPrimary;
|
|
5606
5710
|
|
|
@@ -5616,7 +5720,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObj
|
|
|
5616
5720
|
var colorPrimary = _ref3.colorPrimary;
|
|
5617
5721
|
return colorPrimary;
|
|
5618
5722
|
});
|
|
5619
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5723
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5620
5724
|
|
|
5621
5725
|
var Search$1 = function Search(_ref) {
|
|
5622
5726
|
var _ref$selected = _ref.selected,
|
|
@@ -5892,23 +5996,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
5892
5996
|
}));
|
|
5893
5997
|
};
|
|
5894
5998
|
|
|
5895
|
-
var _templateObject$
|
|
5896
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5897
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5999
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$e;
|
|
6000
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
6001
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5898
6002
|
if (props.showMenu) {
|
|
5899
6003
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5900
6004
|
}
|
|
5901
6005
|
|
|
5902
6006
|
return "display: none;";
|
|
5903
6007
|
});
|
|
5904
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6008
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\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-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
5905
6009
|
var colorPrimary = _ref.colorPrimary;
|
|
5906
6010
|
return colorPrimary;
|
|
5907
6011
|
}, function (_ref2) {
|
|
5908
6012
|
var colorPrimary = _ref2.colorPrimary;
|
|
5909
6013
|
return colorPrimary;
|
|
5910
6014
|
}, devices.mobileAndTablet);
|
|
5911
|
-
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$
|
|
6015
|
+
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5912
6016
|
|
|
5913
6017
|
var Tabs = function Tabs(_ref) {
|
|
5914
6018
|
var _ref$items = _ref.items,
|
|
@@ -6035,11 +6139,11 @@ var Tabs = function Tabs(_ref) {
|
|
|
6035
6139
|
}, "MENU"))));
|
|
6036
6140
|
};
|
|
6037
6141
|
|
|
6038
|
-
var _templateObject$
|
|
6039
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6040
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
6041
|
-
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$
|
|
6042
|
-
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6142
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6143
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-transparent);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
6144
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
6145
|
+
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
6146
|
+
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
6043
6147
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6044
6148
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6045
6149
|
|
|
@@ -6273,18 +6377,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
6273
6377
|
})))));
|
|
6274
6378
|
};
|
|
6275
6379
|
|
|
6276
|
-
var _templateObject$
|
|
6277
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
6278
|
-
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6279
|
-
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$
|
|
6280
|
-
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$
|
|
6281
|
-
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$
|
|
6380
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
|
|
6381
|
+
var FooterSection = /*#__PURE__*/styled.section(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
6382
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
6383
|
+
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
6384
|
+
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6385
|
+
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
6282
6386
|
var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
6283
6387
|
|
|
6284
|
-
var _templateObject$
|
|
6285
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
6286
|
-
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$
|
|
6287
|
-
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
6388
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$k;
|
|
6389
|
+
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
6390
|
+
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
6391
|
+
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
6288
6392
|
|
|
6289
6393
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6290
6394
|
var _ref$items = _ref.items,
|
|
@@ -6300,12 +6404,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6300
6404
|
}));
|
|
6301
6405
|
};
|
|
6302
6406
|
|
|
6303
|
-
var _templateObject$
|
|
6304
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6305
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
6306
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6307
|
-
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$
|
|
6308
|
-
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
6407
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6408
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6409
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
6410
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6411
|
+
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6412
|
+
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6309
6413
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6310
6414
|
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
6311
6415
|
var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
|
|
@@ -6372,15 +6476,15 @@ var Footer = function Footer(_ref) {
|
|
|
6372
6476
|
}, additionalInfo)))));
|
|
6373
6477
|
};
|
|
6374
6478
|
|
|
6375
|
-
var _templateObject$
|
|
6479
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
|
|
6376
6480
|
var LIST_ITEM_GAP = 32;
|
|
6377
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6481
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6378
6482
|
var bottomBorder = _ref.bottomBorder;
|
|
6379
6483
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6380
6484
|
}, zIndexes.anchor);
|
|
6381
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
6382
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6383
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$
|
|
6485
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6486
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6487
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
6384
6488
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
6385
6489
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6386
6490
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -6391,7 +6495,7 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject4$g || (_templateObject4$g
|
|
|
6391
6495
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6392
6496
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6393
6497
|
});
|
|
6394
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6498
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])), function (_ref5) {
|
|
6395
6499
|
var fullWidth = _ref5.fullWidth;
|
|
6396
6500
|
return fullWidth ? '74px' : '46px';
|
|
6397
6501
|
});
|
|
@@ -6638,17 +6742,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6638
6742
|
})) : null) : null))));
|
|
6639
6743
|
};
|
|
6640
6744
|
|
|
6641
|
-
var _templateObject$
|
|
6642
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6745
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6746
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6643
6747
|
var sticky = _ref.sticky;
|
|
6644
6748
|
return sticky ? 'sticky' : 'initial';
|
|
6645
6749
|
}, zIndexes.anchor);
|
|
6646
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
6647
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
6750
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6751
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
6648
6752
|
var title = _ref2.title;
|
|
6649
6753
|
return title ? 'row' : 'row-reverse';
|
|
6650
6754
|
}, devices.tablet, devices.mobile);
|
|
6651
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
6755
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
6652
6756
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6653
6757
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6654
6758
|
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
@@ -6699,15 +6803,15 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6699
6803
|
}, message)));
|
|
6700
6804
|
};
|
|
6701
6805
|
|
|
6702
|
-
var _templateObject$
|
|
6703
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
6704
|
-
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6705
|
-
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$
|
|
6806
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6807
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\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);
|
|
6808
|
+
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
6809
|
+
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
6706
6810
|
var theme = _ref.theme;
|
|
6707
6811
|
return theme.colors.primary;
|
|
6708
6812
|
}, Colors.White);
|
|
6709
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
6710
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
6813
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6814
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6711
6815
|
var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6712
6816
|
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
6713
6817
|
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
@@ -6780,8 +6884,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
6780
6884
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
6781
6885
|
};
|
|
6782
6886
|
|
|
6783
|
-
var _templateObject$
|
|
6784
|
-
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
6887
|
+
var _templateObject$M;
|
|
6888
|
+
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
6785
6889
|
|
|
6786
6890
|
var UpsellCards = function UpsellCards(_ref) {
|
|
6787
6891
|
var upsellCards = _ref.upsellCards;
|
|
@@ -6799,20 +6903,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
6799
6903
|
}));
|
|
6800
6904
|
};
|
|
6801
6905
|
|
|
6802
|
-
var _templateObject$
|
|
6803
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
6906
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$p;
|
|
6907
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
|
|
6804
6908
|
var theme = _ref.theme;
|
|
6805
6909
|
return theme.colors.primary;
|
|
6806
6910
|
}, devices.mobile, devices.tablet);
|
|
6807
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6808
|
-
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6911
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
|
|
6912
|
+
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
6809
6913
|
|
|
6810
|
-
var _templateObject$
|
|
6811
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6812
|
-
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6813
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6814
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$
|
|
6815
|
-
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6914
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
|
|
6915
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
6916
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
6917
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
6918
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
6919
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), devices.mobile);
|
|
6816
6920
|
|
|
6817
6921
|
var Accordion = function Accordion(_ref) {
|
|
6818
6922
|
var _ref$title = _ref.title,
|
|
@@ -6937,8 +7041,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6937
7041
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6938
7042
|
};
|
|
6939
7043
|
|
|
6940
|
-
var _templateObject$
|
|
6941
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7044
|
+
var _templateObject$P;
|
|
7045
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6942
7046
|
|
|
6943
7047
|
var Accordions = function Accordions(_ref) {
|
|
6944
7048
|
var _ref$items = _ref.items,
|
|
@@ -6956,7 +7060,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6956
7060
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6957
7061
|
contentType: accordion.contentType,
|
|
6958
7062
|
displayLevel: accordion.displayLevel,
|
|
6959
|
-
semanticLevel: accordion.semanticLevel
|
|
7063
|
+
semanticLevel: accordion.semanticLevel,
|
|
7064
|
+
initOpen: accordion.initOpen
|
|
6960
7065
|
}, accordion.children);
|
|
6961
7066
|
}));
|
|
6962
7067
|
};
|
|
@@ -6970,13 +7075,13 @@ var Theme = function Theme(_ref) {
|
|
|
6970
7075
|
}, children);
|
|
6971
7076
|
};
|
|
6972
7077
|
|
|
6973
|
-
var _templateObject$
|
|
6974
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7078
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r;
|
|
7079
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
6975
7080
|
var theme = _ref.theme;
|
|
6976
7081
|
return theme.colors.primary;
|
|
6977
7082
|
}, devices.mobile);
|
|
6978
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6979
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7083
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
7084
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
|
|
6980
7085
|
|
|
6981
7086
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
6982
7087
|
var title = _ref.title,
|
|
@@ -7013,8 +7118,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7013
7118
|
}))))));
|
|
7014
7119
|
};
|
|
7015
7120
|
|
|
7016
|
-
var _templateObject$
|
|
7017
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
7121
|
+
var _templateObject$R;
|
|
7122
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-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 .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
7018
7123
|
var bgColor = _ref.bgColor,
|
|
7019
7124
|
theme = _ref.theme;
|
|
7020
7125
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7035,32 +7140,32 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7035
7140
|
}), children);
|
|
7036
7141
|
};
|
|
7037
7142
|
|
|
7038
|
-
var _templateObject$
|
|
7143
|
+
var _templateObject$S, _templateObject2$z, _templateObject3$s, _templateObject4$l, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
7039
7144
|
var LENGTH_LARGE_TEXT = 28;
|
|
7040
7145
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7041
7146
|
var LENGTH_TEXT_TABLET = 10;
|
|
7042
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7147
|
+
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) {
|
|
7043
7148
|
var isCardClickable = _ref.isCardClickable;
|
|
7044
7149
|
return isCardClickable ? 'pointer' : 'default';
|
|
7045
7150
|
}, function (_ref2) {
|
|
7046
7151
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7047
7152
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7048
7153
|
});
|
|
7049
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
7154
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
7050
7155
|
var lineColor = _ref3.lineColor,
|
|
7051
7156
|
theme = _ref3.theme;
|
|
7052
7157
|
if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
|
|
7053
7158
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7054
7159
|
}, zIndexes.contentOverlay);
|
|
7055
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
7056
|
-
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7160
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7161
|
+
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) {
|
|
7057
7162
|
var fullWidth = _ref4.fullWidth;
|
|
7058
7163
|
return fullWidth ? '0' : '20px';
|
|
7059
7164
|
}, function (_ref5) {
|
|
7060
7165
|
var fullWidth = _ref5.fullWidth;
|
|
7061
7166
|
return fullWidth ? '0' : '20px';
|
|
7062
7167
|
});
|
|
7063
|
-
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7168
|
+
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7064
7169
|
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
7065
7170
|
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7066
7171
|
var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
@@ -7321,9 +7426,9 @@ var Card = function Card(_ref) {
|
|
|
7321
7426
|
dangerouslySetInnerHTML: {
|
|
7322
7427
|
__html: truncatedText
|
|
7323
7428
|
}
|
|
7324
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7429
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7325
7430
|
level: 1
|
|
7326
|
-
}, highlightText))
|
|
7431
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7327
7432
|
fullWidth: fullWidth
|
|
7328
7433
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7329
7434
|
ref: node,
|
|
@@ -7337,9 +7442,9 @@ var Card = function Card(_ref) {
|
|
|
7337
7442
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7338
7443
|
};
|
|
7339
7444
|
|
|
7340
|
-
var _templateObject$
|
|
7341
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7342
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
7445
|
+
var _templateObject$T, _templateObject2$A;
|
|
7446
|
+
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);
|
|
7447
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7343
7448
|
|
|
7344
7449
|
var Cards = function Cards(_ref) {
|
|
7345
7450
|
var cards = _ref.cards,
|
|
@@ -7384,18 +7489,18 @@ var Cards = function Cards(_ref) {
|
|
|
7384
7489
|
}));
|
|
7385
7490
|
};
|
|
7386
7491
|
|
|
7387
|
-
var _templateObject$
|
|
7388
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7389
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7492
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
|
|
7493
|
+
var ContentWrapper = /*#__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);
|
|
7494
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__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) {
|
|
7390
7495
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7391
7496
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7392
7497
|
}, function (_ref2) {
|
|
7393
7498
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7394
7499
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7395
7500
|
}, devices.mobileAndTablet);
|
|
7396
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$
|
|
7397
|
-
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$
|
|
7398
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7501
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7502
|
+
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7503
|
+
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7399
7504
|
|
|
7400
7505
|
var divideAddressString = function divideAddressString(address) {
|
|
7401
7506
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7453,16 +7558,16 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7453
7558
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7454
7559
|
};
|
|
7455
7560
|
|
|
7456
|
-
var _templateObject$
|
|
7457
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7458
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7561
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
|
|
7562
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7563
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$C || (_templateObject2$C = /*#__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) {
|
|
7459
7564
|
return props.clickable ? 'pointer' : 'default';
|
|
7460
7565
|
}, devices.mobile);
|
|
7461
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7462
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7566
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7567
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7463
7568
|
return props.showImage ? 2 : '1 / span 4';
|
|
7464
7569
|
}, devices.mobile);
|
|
7465
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7570
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
|
|
7466
7571
|
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7467
7572
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7468
7573
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
@@ -7536,21 +7641,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7536
7641
|
}), link.text)));
|
|
7537
7642
|
};
|
|
7538
7643
|
|
|
7539
|
-
var _templateObject$
|
|
7540
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7644
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
|
|
7645
|
+
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) {
|
|
7541
7646
|
var imageToLeft = _ref.imageToLeft;
|
|
7542
7647
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7543
7648
|
}, devices.mobile);
|
|
7544
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7649
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7545
7650
|
var imageToLeft = _ref2.imageToLeft;
|
|
7546
7651
|
return imageToLeft ? 'left' : 'right';
|
|
7547
7652
|
}, devices.mobile);
|
|
7548
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7653
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7549
7654
|
var imageToLeft = _ref3.imageToLeft;
|
|
7550
7655
|
return imageToLeft ? 'right' : 'left';
|
|
7551
7656
|
}, devices.mobile);
|
|
7552
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
7553
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
7657
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$o || (_templateObject4$o = /*#__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"])));
|
|
7658
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7554
7659
|
|
|
7555
7660
|
var Editorial = function Editorial(_ref) {
|
|
7556
7661
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7614,10 +7719,10 @@ var BackgroundColour;
|
|
|
7614
7719
|
BackgroundColour["White"] = "white";
|
|
7615
7720
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
7616
7721
|
|
|
7617
|
-
var _templateObject$
|
|
7618
|
-
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$
|
|
7619
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7620
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7722
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p;
|
|
7723
|
+
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
7724
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7725
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7621
7726
|
if (!props.infoThemed) {
|
|
7622
7727
|
return;
|
|
7623
7728
|
} else {
|
|
@@ -7628,7 +7733,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_template
|
|
|
7628
7733
|
}
|
|
7629
7734
|
}
|
|
7630
7735
|
});
|
|
7631
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
7736
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7632
7737
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7633
7738
|
}, function (props) {
|
|
7634
7739
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -7741,24 +7846,24 @@ var Information = function Information(_ref) {
|
|
|
7741
7846
|
}))));
|
|
7742
7847
|
};
|
|
7743
7848
|
|
|
7744
|
-
var _templateObject$
|
|
7745
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7849
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
|
|
7850
|
+
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 h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7746
7851
|
var theme = _ref.theme;
|
|
7747
7852
|
return theme.colors.primary;
|
|
7748
7853
|
}, function (_ref2) {
|
|
7749
7854
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7750
7855
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7751
7856
|
}, devices.mobile);
|
|
7752
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7753
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7857
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$F || (_templateObject2$F = /*#__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);
|
|
7858
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7754
7859
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7755
7860
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7756
7861
|
}, devices.mobile);
|
|
7757
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7862
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n ", ";\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), function (_ref4) {
|
|
7758
7863
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7759
7864
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7760
7865
|
}, devices.mobile);
|
|
7761
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7866
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__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"])));
|
|
7762
7867
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__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);
|
|
7763
7868
|
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);
|
|
7764
7869
|
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__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"])));
|
|
@@ -7833,12 +7938,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7833
7938
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
7834
7939
|
};
|
|
7835
7940
|
|
|
7836
|
-
var _templateObject$
|
|
7837
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7838
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7839
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7840
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7841
|
-
var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7941
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
|
|
7942
|
+
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);
|
|
7943
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__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);
|
|
7944
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7945
|
+
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);
|
|
7946
|
+
var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7842
7947
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__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);
|
|
7843
7948
|
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);
|
|
7844
7949
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__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);
|
|
@@ -7904,21 +8009,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7904
8009
|
}, "Scroll Down")) : null);
|
|
7905
8010
|
};
|
|
7906
8011
|
|
|
7907
|
-
var _templateObject$
|
|
7908
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8012
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
|
|
8013
|
+
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) {
|
|
7909
8014
|
var color = _ref.color;
|
|
7910
8015
|
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 ";
|
|
7911
8016
|
}, devices.mobileAndTablet);
|
|
7912
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8017
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__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) {
|
|
7913
8018
|
var hasImage = _ref2.hasImage;
|
|
7914
8019
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7915
8020
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7916
8021
|
var hasImage = _ref3.hasImage;
|
|
7917
8022
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7918
8023
|
});
|
|
7919
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7920
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7921
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8024
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8025
|
+
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);
|
|
8026
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__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);
|
|
7922
8027
|
|
|
7923
8028
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7924
8029
|
var _image$src, _image$alt;
|
|
@@ -7949,8 +8054,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7949
8054
|
}))));
|
|
7950
8055
|
};
|
|
7951
8056
|
|
|
7952
|
-
var _templateObject
|
|
7953
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8057
|
+
var _templateObject$$;
|
|
8058
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7954
8059
|
|
|
7955
8060
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7956
8061
|
var link = _ref.link,
|
|
@@ -7968,11 +8073,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7968
8073
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
7969
8074
|
};
|
|
7970
8075
|
|
|
7971
|
-
var _templateObject$
|
|
7972
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
7973
|
-
var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$
|
|
7974
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7975
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8076
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8077
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\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);
|
|
8078
|
+
var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$I || (_templateObject2$I = /*#__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"])));
|
|
8079
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8080
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__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);
|
|
7976
8081
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__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 max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
|
|
7977
8082
|
var invert = _ref.invert,
|
|
7978
8083
|
theme = _ref.theme;
|
|
@@ -8103,7 +8208,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8103
8208
|
var isIOS = function isIOS() {
|
|
8104
8209
|
try {
|
|
8105
8210
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8106
|
-
if (typeof navigator === undefined) return false;
|
|
8211
|
+
if (typeof navigator === 'undefined') return false;
|
|
8107
8212
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8108
8213
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8109
8214
|
} catch (e) {
|
|
@@ -8119,7 +8224,7 @@ var useIOS = function useIOS() {
|
|
|
8119
8224
|
setIOS = _useState[1];
|
|
8120
8225
|
|
|
8121
8226
|
useEffect(function () {
|
|
8122
|
-
if (typeof navigator === undefined) return;
|
|
8227
|
+
if (typeof navigator === 'undefined') return;
|
|
8123
8228
|
setIOS(isIOS());
|
|
8124
8229
|
}, []);
|
|
8125
8230
|
return IOS;
|
|
@@ -8258,7 +8363,9 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8258
8363
|
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8259
8364
|
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8260
8365
|
brandingText = _ref4.brandingText,
|
|
8261
|
-
brandingLink = _ref4.brandingLink
|
|
8366
|
+
brandingLink = _ref4.brandingLink,
|
|
8367
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
8368
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
8262
8369
|
|
|
8263
8370
|
var _ref5 = link || {},
|
|
8264
8371
|
linkText = _ref5.text,
|
|
@@ -8284,7 +8391,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8284
8391
|
})) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
8285
8392
|
video: video,
|
|
8286
8393
|
poster: poster
|
|
8287
|
-
})), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8394
|
+
})), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8288
8395
|
className: "page-heading-compact__background",
|
|
8289
8396
|
invert: invert
|
|
8290
8397
|
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
@@ -8301,15 +8408,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8301
8408
|
}), linkText))));
|
|
8302
8409
|
};
|
|
8303
8410
|
|
|
8304
|
-
var _templateObject
|
|
8305
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject
|
|
8306
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
8411
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t;
|
|
8412
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8413
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$J || (_templateObject2$J = /*#__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"]))); // PageNumber extends bodyText but uses subtitle-1 font size
|
|
8307
8414
|
|
|
8308
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
8415
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$B || (_templateObject3$B = /*#__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) {
|
|
8309
8416
|
var active = _ref.active;
|
|
8310
8417
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8311
8418
|
});
|
|
8312
|
-
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$
|
|
8419
|
+
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__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"])));
|
|
8313
8420
|
|
|
8314
8421
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8315
8422
|
// If there are less than 6 pages, return all pages
|
|
@@ -8378,12 +8485,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8378
8485
|
}))));
|
|
8379
8486
|
};
|
|
8380
8487
|
|
|
8381
|
-
var _templateObject$
|
|
8382
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8383
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8384
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8385
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8386
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8488
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
|
|
8489
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__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);
|
|
8490
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
8491
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8492
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8493
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
8387
8494
|
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$h || (_templateObject6$h = /*#__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"])));
|
|
8388
8495
|
|
|
8389
8496
|
var Person = function Person(_ref) {
|
|
@@ -8435,11 +8542,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8435
8542
|
}));
|
|
8436
8543
|
};
|
|
8437
8544
|
|
|
8438
|
-
var _templateObject$
|
|
8439
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8440
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8441
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8442
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8545
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v;
|
|
8546
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8547
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
8548
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
8549
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8443
8550
|
|
|
8444
8551
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8445
8552
|
return array.reduce(function (acc, item) {
|
|
@@ -8450,12 +8557,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8450
8557
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8451
8558
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8452
8559
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8453
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8560
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8561
|
+
key: index
|
|
8562
|
+
}, title));
|
|
8454
8563
|
} else if (index > 0) {
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8564
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8565
|
+
key: index
|
|
8566
|
+
}, ", ", title);
|
|
8456
8567
|
}
|
|
8457
8568
|
|
|
8458
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8569
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8570
|
+
key: index
|
|
8571
|
+
}, title);
|
|
8459
8572
|
}));
|
|
8460
8573
|
};
|
|
8461
8574
|
|
|
@@ -8507,14 +8620,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8507
8620
|
}));
|
|
8508
8621
|
};
|
|
8509
8622
|
|
|
8510
|
-
var _templateObject$
|
|
8623
|
+
var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8511
8624
|
var LENGTH_TEXT = 28;
|
|
8512
8625
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8513
8626
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8514
8627
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8515
8628
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8516
8629
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8517
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8630
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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) {
|
|
8518
8631
|
var imageToLeft = _ref.imageToLeft;
|
|
8519
8632
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8520
8633
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8524,8 +8637,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
8524
8637
|
var asCard = _ref3.asCard;
|
|
8525
8638
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8526
8639
|
});
|
|
8527
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
8528
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
8640
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__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"])));
|
|
8641
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__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: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref4) {
|
|
8529
8642
|
var theme = _ref4.theme;
|
|
8530
8643
|
return theme.colors.black;
|
|
8531
8644
|
}, function (_ref5) {
|
|
@@ -8535,7 +8648,7 @@ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_template
|
|
|
8535
8648
|
var theme = _ref6.theme;
|
|
8536
8649
|
return theme.colors.primary;
|
|
8537
8650
|
});
|
|
8538
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8651
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__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 (_ref7) {
|
|
8539
8652
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8540
8653
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8541
8654
|
}, function (_ref8) {
|
|
@@ -8563,7 +8676,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templat
|
|
|
8563
8676
|
|
|
8564
8677
|
return '';
|
|
8565
8678
|
});
|
|
8566
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8679
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8567
8680
|
var marginBottom = _ref10.marginBottom;
|
|
8568
8681
|
return marginBottom + "px";
|
|
8569
8682
|
});
|
|
@@ -8785,26 +8898,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8785
8898
|
}))));
|
|
8786
8899
|
};
|
|
8787
8900
|
|
|
8788
|
-
var _templateObject$
|
|
8901
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
8789
8902
|
var LENGTH_TEXT$2 = 28;
|
|
8790
8903
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8791
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8904
|
+
var PromoWithTitleGrid = /*#__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"])), function (_ref) {
|
|
8792
8905
|
var imageToLeft = _ref.imageToLeft;
|
|
8793
8906
|
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'";
|
|
8794
8907
|
}, devices.tablet, function (_ref2) {
|
|
8795
8908
|
var imageToLeft = _ref2.imageToLeft;
|
|
8796
8909
|
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'";
|
|
8797
8910
|
}, devices.mobile);
|
|
8798
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8911
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
8799
8912
|
var imageToLeft = _ref3.imageToLeft;
|
|
8800
8913
|
return imageToLeft ? 'left' : 'right';
|
|
8801
8914
|
}, devices.mobile);
|
|
8802
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8915
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__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) {
|
|
8803
8916
|
var imageToLeft = _ref4.imageToLeft;
|
|
8804
8917
|
return imageToLeft ? 'right' : 'left';
|
|
8805
8918
|
}, devices.mobile);
|
|
8806
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
8807
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
8919
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__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);
|
|
8920
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$p || (_templateObject5$p = /*#__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"])));
|
|
8808
8921
|
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__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: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
8809
8922
|
var theme = _ref5.theme;
|
|
8810
8923
|
return theme.colors.black;
|
|
@@ -8841,8 +8954,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
|
|
|
8841
8954
|
return '';
|
|
8842
8955
|
});
|
|
8843
8956
|
|
|
8844
|
-
var _templateObject$
|
|
8845
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8957
|
+
var _templateObject$16;
|
|
8958
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n"])), function (_ref) {
|
|
8846
8959
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8847
8960
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8848
8961
|
return aspectRatio;
|
|
@@ -8870,17 +8983,45 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8870
8983
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
8871
8984
|
};
|
|
8872
8985
|
|
|
8986
|
+
// Generates a random string in the format XXX-XXX. Does not meet UUID standards.
|
|
8987
|
+
// To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
8988
|
+
var generateId = function generateId() {
|
|
8989
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
8990
|
+
var datePart = Date.now().toString().slice(-3);
|
|
8991
|
+
return randomPart + "-" + datePart;
|
|
8992
|
+
};
|
|
8993
|
+
|
|
8873
8994
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8874
8995
|
var video = _ref.video,
|
|
8875
8996
|
settings = _ref.settings;
|
|
8876
|
-
var
|
|
8877
|
-
autoPlay = settings.autoPlay;
|
|
8997
|
+
var videoRef = useRef(null);
|
|
8878
8998
|
|
|
8879
8999
|
var _useState = useState(AspectRatio['16:9']),
|
|
8880
9000
|
aspectRatio = _useState[0],
|
|
8881
9001
|
setAspectRatio = _useState[1];
|
|
8882
9002
|
|
|
8883
|
-
var
|
|
9003
|
+
var _React$useState = React__default.useState(false),
|
|
9004
|
+
isVideoReady = _React$useState[0],
|
|
9005
|
+
setIsVideoReady = _React$useState[1];
|
|
9006
|
+
|
|
9007
|
+
var muted = settings.muted,
|
|
9008
|
+
autoPlay = settings.autoPlay;
|
|
9009
|
+
React__default.useEffect(function () {
|
|
9010
|
+
var changeVideoReadiness = function changeVideoReadiness() {
|
|
9011
|
+
setIsVideoReady(true);
|
|
9012
|
+
};
|
|
9013
|
+
|
|
9014
|
+
if (videoRef.current) {
|
|
9015
|
+
videoRef.current.addEventListener('canplay', changeVideoReadiness);
|
|
9016
|
+
return function () {
|
|
9017
|
+
var _videoRef$current;
|
|
9018
|
+
|
|
9019
|
+
return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
|
|
9020
|
+
};
|
|
9021
|
+
}
|
|
9022
|
+
|
|
9023
|
+
return undefined;
|
|
9024
|
+
}, []);
|
|
8884
9025
|
|
|
8885
9026
|
var handleMetadataLoaded = function handleMetadataLoaded() {
|
|
8886
9027
|
if (videoRef.current) {
|
|
@@ -8889,18 +9030,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8889
9030
|
}
|
|
8890
9031
|
};
|
|
8891
9032
|
|
|
8892
|
-
var
|
|
9033
|
+
var videoElementId = useMemo(function () {
|
|
9034
|
+
return "video-id-" + generateId();
|
|
9035
|
+
}, []);
|
|
9036
|
+
var clonedVideo = /*#__PURE__*/cloneElement(video, _extends({
|
|
9037
|
+
playsInline: true
|
|
9038
|
+
}, muted ? {
|
|
8893
9039
|
muted: true
|
|
8894
9040
|
} : {}, autoPlay && muted ? {
|
|
8895
9041
|
autoPlay: true
|
|
8896
9042
|
} : {}, {
|
|
8897
9043
|
height: '100%',
|
|
8898
9044
|
width: '100%',
|
|
8899
|
-
onLoadedMetadata: handleMetadataLoaded
|
|
9045
|
+
onLoadedMetadata: handleMetadataLoaded,
|
|
9046
|
+
id: videoElementId
|
|
8900
9047
|
}, {
|
|
9048
|
+
poster: autoPlay && isVideoReady ? undefined : video.props.poster,
|
|
8901
9049
|
ref: videoRef
|
|
8902
9050
|
}));
|
|
8903
|
-
var videoElementId = clonedVideo.props.id;
|
|
8904
9051
|
var videoContainerId = "video-container-for-" + videoElementId;
|
|
8905
9052
|
|
|
8906
9053
|
var videoControlsProps = _extends({}, settings, {
|
|
@@ -8908,14 +9055,12 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8908
9055
|
videoContainerId: videoContainerId
|
|
8909
9056
|
});
|
|
8910
9057
|
|
|
8911
|
-
|
|
8912
|
-
setAspectRatio(AspectRatio['16:9']);
|
|
8913
|
-
}, [video.props.src]);
|
|
9058
|
+
var showVideoControls = autoPlay ? isVideoReady : true;
|
|
8914
9059
|
return /*#__PURE__*/React__default.createElement(VideoContainer, {
|
|
8915
9060
|
aspectRatio: aspectRatio,
|
|
8916
9061
|
id: videoContainerId,
|
|
8917
|
-
"data-testid":
|
|
8918
|
-
}, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
9062
|
+
"data-testid": 'video-container'
|
|
9063
|
+
}, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
8919
9064
|
};
|
|
8920
9065
|
|
|
8921
9066
|
var PromoChild = function PromoChild(_ref) {
|
|
@@ -9002,8 +9147,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9002
9147
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9003
9148
|
};
|
|
9004
9149
|
|
|
9005
|
-
var _templateObject$
|
|
9006
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9150
|
+
var _templateObject$17;
|
|
9151
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9007
9152
|
|
|
9008
9153
|
/**
|
|
9009
9154
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9061,9 +9206,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9061
9206
|
})));
|
|
9062
9207
|
};
|
|
9063
9208
|
|
|
9064
|
-
var _templateObject$
|
|
9065
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9066
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9209
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$G;
|
|
9210
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9211
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9067
9212
|
var horizontalMode = _ref.horizontalMode;
|
|
9068
9213
|
if (horizontalMode) return 'row';
|
|
9069
9214
|
return 'column';
|
|
@@ -9071,7 +9216,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObjec
|
|
|
9071
9216
|
var gap = _ref2.gap;
|
|
9072
9217
|
return gap + "px";
|
|
9073
9218
|
});
|
|
9074
|
-
var ErrorLabel$
|
|
9219
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9075
9220
|
var darkMode = _ref3.darkMode;
|
|
9076
9221
|
if (darkMode) return 'var(--base-color-white)';
|
|
9077
9222
|
return 'var(--base-color-errorstate)';
|
|
@@ -9143,7 +9288,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9143
9288
|
error: error !== undefined ? '' : undefined,
|
|
9144
9289
|
onChange: changeHandler
|
|
9145
9290
|
}, radio.content);
|
|
9146
|
-
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9291
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
9147
9292
|
darkMode: darkMode,
|
|
9148
9293
|
"data-testid": "radio-group-error-label"
|
|
9149
9294
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9151,10 +9296,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9151
9296
|
}, error)));
|
|
9152
9297
|
};
|
|
9153
9298
|
|
|
9154
|
-
var _templateObject$
|
|
9155
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9156
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9157
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9299
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$H;
|
|
9300
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\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);
|
|
9301
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__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"])));
|
|
9302
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__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);
|
|
9158
9303
|
|
|
9159
9304
|
var StatusBanner = function StatusBanner(_ref) {
|
|
9160
9305
|
var statusText = _ref.statusText,
|
|
@@ -9216,8 +9361,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9216
9361
|
})))));
|
|
9217
9362
|
};
|
|
9218
9363
|
|
|
9219
|
-
var _templateObject$
|
|
9220
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9364
|
+
var _templateObject$1a;
|
|
9365
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__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);
|
|
9221
9366
|
|
|
9222
9367
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9223
9368
|
var title = _ref.title,
|
|
@@ -9243,8 +9388,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9243
9388
|
}, description))));
|
|
9244
9389
|
};
|
|
9245
9390
|
|
|
9246
|
-
var _templateObject$
|
|
9247
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
9391
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9392
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1b || (_templateObject$1b = /*#__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) {
|
|
9248
9393
|
var theme = _ref.theme;
|
|
9249
9394
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9250
9395
|
}, function (_ref2) {
|
|
@@ -9254,12 +9399,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
|
|
|
9254
9399
|
var theme = _ref3.theme;
|
|
9255
9400
|
return theme.colors.lightgrey;
|
|
9256
9401
|
});
|
|
9257
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
9402
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9258
9403
|
var theme = _ref4.theme;
|
|
9259
9404
|
return theme.colors.darkgrey;
|
|
9260
9405
|
});
|
|
9261
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9262
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
9406
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9407
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9263
9408
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9264
9409
|
var theme = _ref5.theme;
|
|
9265
9410
|
return {
|
|
@@ -9267,7 +9412,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9267
9412
|
color: theme.colors.black,
|
|
9268
9413
|
title: 'Select Arrow'
|
|
9269
9414
|
};
|
|
9270
|
-
})(_templateObject5$
|
|
9415
|
+
})(_templateObject5$q || (_templateObject5$q = /*#__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"])));
|
|
9271
9416
|
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9272
9417
|
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9273
9418
|
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -9666,9 +9811,9 @@ function Select(_ref3) {
|
|
|
9666
9811
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9667
9812
|
}
|
|
9668
9813
|
|
|
9669
|
-
var _templateObject$
|
|
9670
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9671
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9814
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$J, _templateObject4$z;
|
|
9815
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9816
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-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 .chord-select__single-value,\n .chord-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 .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-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 &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-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 .chord-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 .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9672
9817
|
var width = _ref.width;
|
|
9673
9818
|
if (!width) return 'none';
|
|
9674
9819
|
return width + 'px';
|
|
@@ -9685,12 +9830,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateOb
|
|
|
9685
9830
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9686
9831
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9687
9832
|
});
|
|
9688
|
-
var TextLabel$
|
|
9833
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9689
9834
|
var darkMode = _ref5.darkMode;
|
|
9690
9835
|
if (darkMode) return "var(--base-color-white)";
|
|
9691
9836
|
return "var(--base-color-black)";
|
|
9692
9837
|
});
|
|
9693
|
-
var ErrorLabel$
|
|
9838
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9694
9839
|
var darkMode = _ref6.darkMode;
|
|
9695
9840
|
if (darkMode) return "var(--base-color-white)";
|
|
9696
9841
|
return "var(--base-color-errorstate)";
|
|
@@ -9707,7 +9852,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9707
9852
|
width = _ref.width,
|
|
9708
9853
|
darkMode = _ref.darkMode,
|
|
9709
9854
|
children = _ref.children;
|
|
9710
|
-
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$
|
|
9855
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9711
9856
|
darkMode: darkMode,
|
|
9712
9857
|
"data-testid": "select2-text-label"
|
|
9713
9858
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9716,7 +9861,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9716
9861
|
width: width,
|
|
9717
9862
|
error: error,
|
|
9718
9863
|
darkMode: darkMode
|
|
9719
|
-
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9864
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9720
9865
|
darkMode: darkMode,
|
|
9721
9866
|
"data-testid": "select2-error-label"
|
|
9722
9867
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9806,8 +9951,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9806
9951
|
})));
|
|
9807
9952
|
};
|
|
9808
9953
|
|
|
9809
|
-
var _templateObject$
|
|
9810
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
9954
|
+
var _templateObject$1d;
|
|
9955
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
9811
9956
|
var theme = _ref.theme;
|
|
9812
9957
|
return theme.colors.primary;
|
|
9813
9958
|
});
|
|
@@ -9835,8 +9980,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9835
9980
|
})));
|
|
9836
9981
|
};
|
|
9837
9982
|
|
|
9838
|
-
var _templateObject$
|
|
9839
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
9983
|
+
var _templateObject$1e, _templateObject2$S;
|
|
9984
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_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"])), ImageAspectRatioWrapper, function (_ref) {
|
|
9840
9985
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9841
9986
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9842
9987
|
return aspectRatio;
|
|
@@ -9846,7 +9991,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1
|
|
|
9846
9991
|
height = _ref2.height;
|
|
9847
9992
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9848
9993
|
});
|
|
9849
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
9994
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__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"])));
|
|
9850
9995
|
|
|
9851
9996
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9852
9997
|
var caption = _ref.caption,
|
|
@@ -9884,13 +10029,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9884
10029
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9885
10030
|
};
|
|
9886
10031
|
|
|
9887
|
-
var _templateObject$
|
|
9888
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9889
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10032
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$K;
|
|
10033
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10034
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9890
10035
|
var displayAttribution = _ref.displayAttribution;
|
|
9891
10036
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9892
10037
|
});
|
|
9893
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10038
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__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);
|
|
9894
10039
|
|
|
9895
10040
|
var Quote = function Quote(_ref) {
|
|
9896
10041
|
var text = _ref.text,
|
|
@@ -9914,12 +10059,12 @@ var Quote = function Quote(_ref) {
|
|
|
9914
10059
|
}, attribution))));
|
|
9915
10060
|
};
|
|
9916
10061
|
|
|
9917
|
-
var _templateObject$
|
|
9918
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9919
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9920
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
9921
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9922
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10062
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
|
|
10063
|
+
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"])));
|
|
10064
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10065
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10066
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10067
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__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);
|
|
9923
10068
|
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__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);
|
|
9924
10069
|
|
|
9925
10070
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -9958,11 +10103,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9958
10103
|
}, title)))));
|
|
9959
10104
|
};
|
|
9960
10105
|
|
|
9961
|
-
var _templateObject$
|
|
9962
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9963
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
9964
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
9965
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10106
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
10107
|
+
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"])));
|
|
10108
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
10109
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10110
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
9966
10111
|
|
|
9967
10112
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9968
10113
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10060,97 +10205,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10060
10205
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10061
10206
|
};
|
|
10062
10207
|
|
|
10063
|
-
var _templateObject$
|
|
10064
|
-
var
|
|
10065
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$V || (_templateObject2$V = /*#__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 @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
10066
|
-
var mobileOpen = _ref.mobileOpen;
|
|
10067
|
-
return mobileOpen ? "block" : 'none';
|
|
10068
|
-
}, Colors.White, Colors.DarkGrey);
|
|
10069
|
-
var MenuItem$1 = /*#__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 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), Colors.Black, function (_ref2) {
|
|
10070
|
-
var active = _ref2.active;
|
|
10071
|
-
return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10072
|
-
}, Colors.MidGrey, devices.mobile);
|
|
10073
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject4$B || (_templateObject4$B = /*#__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: none;\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 @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
|
|
10074
|
-
|
|
10075
|
-
/**
|
|
10076
|
-
* Vertical menu component uses for navigation
|
|
10077
|
-
* inside website chapter. It looks like a vertical
|
|
10078
|
-
* list with clickable items on desktop and dropdown
|
|
10079
|
-
* list on mobile.
|
|
10080
|
-
*
|
|
10081
|
-
* ## Menu items
|
|
10082
|
-
* Menu items should be passed as `items` prop. This
|
|
10083
|
-
* should be an array of objects. Each object should
|
|
10084
|
-
* have `text` (text displayed as a menu item) and
|
|
10085
|
-
* `onClick` (click handler function)
|
|
10086
|
-
*
|
|
10087
|
-
* ## Active menu item
|
|
10088
|
-
* Active menu item should be passed as component `activeItem`
|
|
10089
|
-
* prop. This indicates on which menu item should be highlighted
|
|
10090
|
-
* as active one. Should be equal to `text` prop from one of the `items`
|
|
10091
|
-
*/
|
|
10092
|
-
|
|
10093
|
-
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
10094
|
-
var items = _ref.items,
|
|
10095
|
-
activeItem = _ref.activeItem;
|
|
10096
|
-
|
|
10097
|
-
var _useState = useState(false),
|
|
10098
|
-
mobileOpen = _useState[0],
|
|
10099
|
-
setMobileOpen = _useState[1];
|
|
10100
|
-
|
|
10101
|
-
var containerRef = useRef(null);
|
|
10102
|
-
|
|
10103
|
-
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
10104
|
-
setMobileOpen(function (prev) {
|
|
10105
|
-
return !prev;
|
|
10106
|
-
});
|
|
10107
|
-
};
|
|
10108
|
-
|
|
10109
|
-
var outsideClickHandler = function outsideClickHandler(event) {
|
|
10110
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
10111
|
-
setMobileOpen(false);
|
|
10112
|
-
}
|
|
10113
|
-
};
|
|
10114
|
-
|
|
10115
|
-
useEffect(function () {
|
|
10116
|
-
document.addEventListener('mousedown', outsideClickHandler);
|
|
10117
|
-
return function () {
|
|
10118
|
-
document.removeEventListener('mousedown', outsideClickHandler);
|
|
10119
|
-
};
|
|
10120
|
-
}, [containerRef]);
|
|
10121
|
-
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
10122
|
-
ref: containerRef,
|
|
10123
|
-
"data-testid": "nav-menu-container"
|
|
10124
|
-
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
10125
|
-
mobileOpen: mobileOpen,
|
|
10126
|
-
onClick: mobileButtonClickHandler,
|
|
10127
|
-
"data-testid": "nav-menu-mobile-button"
|
|
10128
|
-
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10129
|
-
iconName: "DropdownArrow",
|
|
10130
|
-
direction: mobileOpen ? 'left' : 'right'
|
|
10131
|
-
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
10132
|
-
mobileOpen: mobileOpen,
|
|
10133
|
-
"data-testid": "nav-menu-list"
|
|
10134
|
-
}, items.map(function (item, idx) {
|
|
10135
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
10136
|
-
key: item.text + "-" + idx
|
|
10137
|
-
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
10138
|
-
onClick: item.onClick,
|
|
10139
|
-
active: item.text === activeItem,
|
|
10140
|
-
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
10141
|
-
}, item.text));
|
|
10142
|
-
})));
|
|
10143
|
-
};
|
|
10144
|
-
|
|
10145
|
-
var _templateObject$1h, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
|
|
10146
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10208
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
|
|
10209
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10147
10210
|
var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10148
10211
|
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10149
10212
|
var color = _ref.color;
|
|
10150
10213
|
return "var(--base-color-" + color + ")";
|
|
10151
10214
|
});
|
|
10152
10215
|
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10153
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$
|
|
10216
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10154
10217
|
var color = _ref2.color;
|
|
10155
10218
|
return "var(--base-color-" + color + ")";
|
|
10156
10219
|
});
|
|
@@ -10240,14 +10303,192 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10240
10303
|
}, strengthLabel))));
|
|
10241
10304
|
};
|
|
10242
10305
|
|
|
10243
|
-
var _templateObject$
|
|
10244
|
-
var
|
|
10245
|
-
var
|
|
10246
|
-
var
|
|
10247
|
-
var
|
|
10306
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t;
|
|
10307
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10308
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$X || (_templateObject2$X = /*#__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);
|
|
10309
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10310
|
+
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) {
|
|
10311
|
+
var isActive = _ref.isActive;
|
|
10312
|
+
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10313
|
+
}, Colors.MidGrey);
|
|
10314
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10315
|
+
var isOpen = _ref2.isOpen;
|
|
10316
|
+
return isOpen ? 'block' : 'none';
|
|
10317
|
+
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
10318
|
+
|
|
10319
|
+
var NavItem = function NavItem(_ref) {
|
|
10320
|
+
var text = _ref.text,
|
|
10321
|
+
href = _ref.href,
|
|
10322
|
+
onClick = _ref.onClick,
|
|
10323
|
+
isActive = _ref.isActive,
|
|
10324
|
+
isMobile = _ref.isMobile;
|
|
10325
|
+
var linkRef = useRef(null);
|
|
10326
|
+
useEffect(function () {
|
|
10327
|
+
var handleClick = function handleClick(e) {
|
|
10328
|
+
if (onClick) onClick(e);
|
|
10329
|
+
};
|
|
10330
|
+
|
|
10331
|
+
var linkElement = linkRef.current;
|
|
10332
|
+
|
|
10333
|
+
if (linkElement) {
|
|
10334
|
+
linkElement.addEventListener('click', handleClick);
|
|
10335
|
+
}
|
|
10336
|
+
|
|
10337
|
+
return function () {
|
|
10338
|
+
if (linkElement) {
|
|
10339
|
+
linkElement.removeEventListener('click', handleClick);
|
|
10340
|
+
}
|
|
10341
|
+
};
|
|
10342
|
+
}, [onClick]);
|
|
10343
|
+
var ariaCurrent = isMobile ? undefined : isActive;
|
|
10344
|
+
var ariaSelected = isMobile ? isActive : undefined;
|
|
10345
|
+
var role = isMobile ? 'option' : undefined;
|
|
10346
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
10347
|
+
"aria-current": ariaCurrent,
|
|
10348
|
+
"aria-selected": ariaSelected,
|
|
10349
|
+
role: role
|
|
10350
|
+
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
10351
|
+
ref: linkRef,
|
|
10352
|
+
href: href,
|
|
10353
|
+
isActive: isActive,
|
|
10354
|
+
"data-testid": "nav-menu-item" + (isActive ? '-active' : '')
|
|
10355
|
+
}, text));
|
|
10356
|
+
};
|
|
10357
|
+
|
|
10358
|
+
var DesktopNav = function DesktopNav(_ref2) {
|
|
10359
|
+
var items = _ref2.items,
|
|
10360
|
+
activeItem = _ref2.activeItem,
|
|
10361
|
+
ariaLabel = _ref2.ariaLabel;
|
|
10362
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
10363
|
+
"data-testid": "nav-menu-container-desktop",
|
|
10364
|
+
"aria-label": ariaLabel
|
|
10365
|
+
}, /*#__PURE__*/React__default.createElement(MenuList, {
|
|
10366
|
+
"data-testid": "nav-menu-list"
|
|
10367
|
+
}, items.map(function (_ref3, idx) {
|
|
10368
|
+
var text = _ref3.text,
|
|
10369
|
+
href = _ref3.href,
|
|
10370
|
+
onClick = _ref3.onClick;
|
|
10371
|
+
return /*#__PURE__*/React__default.createElement(NavItem, {
|
|
10372
|
+
key: text + "-" + idx,
|
|
10373
|
+
text: text,
|
|
10374
|
+
href: href,
|
|
10375
|
+
onClick: onClick,
|
|
10376
|
+
isActive: text === activeItem
|
|
10377
|
+
});
|
|
10378
|
+
})));
|
|
10379
|
+
};
|
|
10380
|
+
|
|
10381
|
+
var MobileNav = function MobileNav(_ref4) {
|
|
10382
|
+
var items = _ref4.items,
|
|
10383
|
+
activeItem = _ref4.activeItem,
|
|
10384
|
+
ariaLabel = _ref4.ariaLabel;
|
|
10385
|
+
|
|
10386
|
+
var _useState = useState(false),
|
|
10387
|
+
isOpen = _useState[0],
|
|
10388
|
+
setIsOpen = _useState[1];
|
|
10389
|
+
|
|
10390
|
+
var containerRef = useRef(null);
|
|
10391
|
+
|
|
10392
|
+
var buttonClickHandler = function buttonClickHandler() {
|
|
10393
|
+
setIsOpen(function (prev) {
|
|
10394
|
+
return !prev;
|
|
10395
|
+
});
|
|
10396
|
+
};
|
|
10397
|
+
|
|
10398
|
+
var outsideClickHandler = function outsideClickHandler(event) {
|
|
10399
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
10400
|
+
setIsOpen(false);
|
|
10401
|
+
}
|
|
10402
|
+
};
|
|
10403
|
+
|
|
10404
|
+
useEffect(function () {
|
|
10405
|
+
document.addEventListener('mousedown', outsideClickHandler);
|
|
10406
|
+
return function () {
|
|
10407
|
+
document.removeEventListener('mousedown', outsideClickHandler);
|
|
10408
|
+
};
|
|
10409
|
+
}, [containerRef]);
|
|
10410
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
10411
|
+
ref: containerRef,
|
|
10412
|
+
"data-testid": "nav-menu-container-mobile",
|
|
10413
|
+
"aria-label": ariaLabel
|
|
10414
|
+
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
10415
|
+
onClick: buttonClickHandler,
|
|
10416
|
+
"data-testid": "nav-menu-mobile-button",
|
|
10417
|
+
"aria-expanded": isOpen,
|
|
10418
|
+
"aria-controls": "auxiliary-nav-list",
|
|
10419
|
+
"aria-haspopup": "listbox",
|
|
10420
|
+
role: "combobox"
|
|
10421
|
+
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10422
|
+
iconName: "DropdownArrow",
|
|
10423
|
+
direction: isOpen ? 'left' : 'right'
|
|
10424
|
+
})), /*#__PURE__*/React__default.createElement(MobileMenuList, {
|
|
10425
|
+
id: "auxiliary-nav-list",
|
|
10426
|
+
"data-testid": "nav-menu-list",
|
|
10427
|
+
isOpen: isOpen,
|
|
10428
|
+
"aria-hidden": !isOpen,
|
|
10429
|
+
role: "listbox"
|
|
10430
|
+
}, items.map(function (_ref5, idx) {
|
|
10431
|
+
var text = _ref5.text,
|
|
10432
|
+
href = _ref5.href,
|
|
10433
|
+
onClick = _ref5.onClick;
|
|
10434
|
+
return /*#__PURE__*/React__default.createElement(NavItem, {
|
|
10435
|
+
key: text + "-" + idx,
|
|
10436
|
+
text: text,
|
|
10437
|
+
href: href,
|
|
10438
|
+
onClick: onClick,
|
|
10439
|
+
isActive: text === activeItem,
|
|
10440
|
+
isMobile: true
|
|
10441
|
+
});
|
|
10442
|
+
})));
|
|
10443
|
+
};
|
|
10444
|
+
/**
|
|
10445
|
+
* Vertical menu component uses for navigation
|
|
10446
|
+
* inside website chapter. It looks like a vertical
|
|
10447
|
+
* list with clickable items on desktop and dropdown
|
|
10448
|
+
* list on mobile.
|
|
10449
|
+
*
|
|
10450
|
+
* ## Menu items
|
|
10451
|
+
* Menu items should be passed as `items` prop. This
|
|
10452
|
+
* should be an array of objects. Each object should
|
|
10453
|
+
* have `text` (text displayed as a menu item) and
|
|
10454
|
+
* `onClick` (click handler function)
|
|
10455
|
+
*
|
|
10456
|
+
* ## Active menu item
|
|
10457
|
+
* Active menu item should be passed as component `activeItem`
|
|
10458
|
+
* prop. This indicates on which menu item should be highlighted
|
|
10459
|
+
* as active one. Should be equal to `text` prop from one of the `items`
|
|
10460
|
+
*/
|
|
10461
|
+
|
|
10462
|
+
|
|
10463
|
+
var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
10464
|
+
var items = _ref6.items,
|
|
10465
|
+
activeItem = _ref6.activeItem,
|
|
10466
|
+
isMobile = _ref6.isMobile,
|
|
10467
|
+
ariaLabel = _ref6.ariaLabel;
|
|
10468
|
+
|
|
10469
|
+
if (isMobile) {
|
|
10470
|
+
return /*#__PURE__*/React__default.createElement(MobileNav, {
|
|
10471
|
+
items: items,
|
|
10472
|
+
activeItem: activeItem,
|
|
10473
|
+
ariaLabel: ariaLabel
|
|
10474
|
+
});
|
|
10475
|
+
}
|
|
10476
|
+
|
|
10477
|
+
return /*#__PURE__*/React__default.createElement(DesktopNav, {
|
|
10478
|
+
items: items,
|
|
10479
|
+
activeItem: activeItem,
|
|
10480
|
+
ariaLabel: ariaLabel
|
|
10481
|
+
});
|
|
10482
|
+
};
|
|
10483
|
+
|
|
10484
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10485
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10486
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10487
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10488
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$E || (_templateObject4$E = /*#__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\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) {
|
|
10248
10489
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10249
10490
|
}, devices.tablet, devices.mobile);
|
|
10250
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
10491
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
|
|
10251
10492
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10252
10493
|
}, devices.mobile);
|
|
10253
10494
|
var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
@@ -10525,9 +10766,9 @@ var LiveChat = function LiveChat() {
|
|
|
10525
10766
|
});
|
|
10526
10767
|
};
|
|
10527
10768
|
|
|
10528
|
-
var _templateObject$
|
|
10529
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10530
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10769
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
10770
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
10771
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
10531
10772
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10532
10773
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10533
10774
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10555,11 +10796,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10555
10796
|
}, children)));
|
|
10556
10797
|
};
|
|
10557
10798
|
|
|
10558
|
-
var _templateObject$
|
|
10559
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
10560
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
10561
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10562
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
10799
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
10800
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
10801
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
10802
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10803
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
10563
10804
|
|
|
10564
10805
|
var MAX_Z_INDEX = 9999999999;
|
|
10565
10806
|
|
|
@@ -10679,8 +10920,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10679
10920
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
10680
10921
|
};
|
|
10681
10922
|
|
|
10682
|
-
var _templateObject$
|
|
10683
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__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\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\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10923
|
+
var _templateObject$1n;
|
|
10924
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1n || (_templateObject$1n = /*#__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\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\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10684
10925
|
var theme = _ref.theme;
|
|
10685
10926
|
return theme.colors.primary;
|
|
10686
10927
|
}, function (_ref2) {
|
|
@@ -11621,5 +11862,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
|
|
|
11621
11862
|
return theme.fonts.tablet.sizes.body[1];
|
|
11622
11863
|
}, devices.desktop, devices.largeDesktop);
|
|
11623
11864
|
|
|
11624
|
-
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, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, 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, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
|
|
11865
|
+
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, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, 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, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
|
|
11625
11866
|
//# sourceMappingURL=chord.esm.js.map
|