@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
|
@@ -2625,7 +2625,39 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateO
|
|
|
2625
2625
|
});
|
|
2626
2626
|
|
|
2627
2627
|
var _templateObject$b;
|
|
2628
|
-
|
|
2628
|
+
/**
|
|
2629
|
+
* # IMPORTANT
|
|
2630
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
2631
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
2632
|
+
*/
|
|
2633
|
+
|
|
2634
|
+
var GridItemLegacy = /*#__PURE__*/styled__default.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) {
|
|
2635
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
2636
|
+
return columnStartDesktop;
|
|
2637
|
+
}, function (_ref2) {
|
|
2638
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
2639
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
2640
|
+
return columnSpanDesktop;
|
|
2641
|
+
}, devices.mobile, function (_ref3) {
|
|
2642
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
2643
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
2644
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
2645
|
+
}, function (_ref4) {
|
|
2646
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
2647
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
2648
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
2649
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
2650
|
+
}, devices.tablet, function (_ref5) {
|
|
2651
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
2652
|
+
return columnStartDevice;
|
|
2653
|
+
}, function (_ref6) {
|
|
2654
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
2655
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
2656
|
+
return columnSpanDevice;
|
|
2657
|
+
});
|
|
2658
|
+
|
|
2659
|
+
var _templateObject$c;
|
|
2660
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.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) {
|
|
2629
2661
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2630
2662
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2631
2663
|
return aspectRatio;
|
|
@@ -2643,8 +2675,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$b
|
|
|
2643
2675
|
return aspectRatio;
|
|
2644
2676
|
});
|
|
2645
2677
|
|
|
2646
|
-
var _templateObject$
|
|
2647
|
-
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2678
|
+
var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
2679
|
+
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
2648
2680
|
var height = _ref.height;
|
|
2649
2681
|
return height ? height + "px" : '6px';
|
|
2650
2682
|
});
|
|
@@ -2727,13 +2759,13 @@ var Progress = function Progress(_ref) {
|
|
|
2727
2759
|
}, renderSteps()));
|
|
2728
2760
|
};
|
|
2729
2761
|
|
|
2730
|
-
var _templateObject$
|
|
2731
|
-
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2762
|
+
var _templateObject$e, _templateObject2$4, _templateObject3$3;
|
|
2763
|
+
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
2732
2764
|
var RadioLine = /*#__PURE__*/styled__default.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"])));
|
|
2733
2765
|
var RadioError = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
2734
2766
|
|
|
2735
|
-
var _templateObject$
|
|
2736
|
-
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2767
|
+
var _templateObject$f;
|
|
2768
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
2737
2769
|
var typography = _ref.typography;
|
|
2738
2770
|
return typography;
|
|
2739
2771
|
}, function (_ref2) {
|
|
@@ -2889,8 +2921,8 @@ var Radio = function Radio(_ref) {
|
|
|
2889
2921
|
}, error)));
|
|
2890
2922
|
};
|
|
2891
2923
|
|
|
2892
|
-
var _templateObject$
|
|
2893
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2924
|
+
var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
2925
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2894
2926
|
var Radio$1 = /*#__PURE__*/styled__default.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) {
|
|
2895
2927
|
var error = _ref.error,
|
|
2896
2928
|
darkMode = _ref.darkMode,
|
|
@@ -2998,8 +3030,8 @@ var Radio2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2998
3030
|
}, error)));
|
|
2999
3031
|
});
|
|
3000
3032
|
|
|
3001
|
-
var _templateObject$
|
|
3002
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3033
|
+
var _templateObject$h, _templateObject2$6, _templateObject3$5;
|
|
3034
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3003
3035
|
var IconWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
3004
3036
|
var theme = _ref.theme;
|
|
3005
3037
|
return theme.colors.primary;
|
|
@@ -3070,8 +3102,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3070
3102
|
}, renderNextIcon()));
|
|
3071
3103
|
};
|
|
3072
3104
|
|
|
3073
|
-
var _templateObject$
|
|
3074
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3105
|
+
var _templateObject$i;
|
|
3106
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3075
3107
|
var fillColor = _ref.fillColor;
|
|
3076
3108
|
return fillColor;
|
|
3077
3109
|
});
|
|
@@ -3095,8 +3127,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3095
3127
|
})));
|
|
3096
3128
|
};
|
|
3097
3129
|
|
|
3098
|
-
var _templateObject$
|
|
3099
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3130
|
+
var _templateObject$j, _templateObject2$7;
|
|
3131
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3100
3132
|
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3101
3133
|
|
|
3102
3134
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3115,8 +3147,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3115
3147
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3116
3148
|
};
|
|
3117
3149
|
|
|
3118
|
-
var _templateObject$
|
|
3119
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3150
|
+
var _templateObject$k;
|
|
3151
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3120
3152
|
|
|
3121
3153
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3122
3154
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3326,8 +3358,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3326
3358
|
})))));
|
|
3327
3359
|
};
|
|
3328
3360
|
|
|
3329
|
-
var _templateObject$
|
|
3330
|
-
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$
|
|
3361
|
+
var _templateObject$l, _templateObject2$8;
|
|
3362
|
+
var CustomImage = /*#__PURE__*/styled__default.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);
|
|
3331
3363
|
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.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);
|
|
3332
3364
|
|
|
3333
3365
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3360,8 +3392,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3360
3392
|
}));
|
|
3361
3393
|
};
|
|
3362
3394
|
|
|
3363
|
-
var _templateObject$
|
|
3364
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3395
|
+
var _templateObject$m, _templateObject2$9;
|
|
3396
|
+
var TabText = /*#__PURE__*/styled__default.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) {
|
|
3365
3397
|
if (props.withIcon === 'left') {
|
|
3366
3398
|
return "margin-left: 5px;";
|
|
3367
3399
|
}
|
|
@@ -3460,8 +3492,8 @@ var Tab = function Tab(_ref) {
|
|
|
3460
3492
|
}));
|
|
3461
3493
|
};
|
|
3462
3494
|
|
|
3463
|
-
var _templateObject$
|
|
3464
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3495
|
+
var _templateObject$n, _templateObject2$a;
|
|
3496
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
3465
3497
|
var iconName = _ref.iconName;
|
|
3466
3498
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3467
3499
|
}, function (_ref2) {
|
|
@@ -3512,8 +3544,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3512
3544
|
})) : null, children);
|
|
3513
3545
|
};
|
|
3514
3546
|
|
|
3515
|
-
var _templateObject$
|
|
3516
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3547
|
+
var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3548
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3517
3549
|
var width = _ref.width;
|
|
3518
3550
|
return width ? width + "px;" : '100%;';
|
|
3519
3551
|
}, function (_ref2) {
|
|
@@ -3636,8 +3668,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
3636
3668
|
}, error))));
|
|
3637
3669
|
};
|
|
3638
3670
|
|
|
3639
|
-
var _templateObject$
|
|
3640
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3671
|
+
var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3672
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3641
3673
|
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
3642
3674
|
var width = _ref.width;
|
|
3643
3675
|
if (!width) return 'none';
|
|
@@ -3763,15 +3795,87 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3763
3795
|
}, error)));
|
|
3764
3796
|
});
|
|
3765
3797
|
|
|
3766
|
-
var _templateObject$
|
|
3767
|
-
var
|
|
3798
|
+
var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
3799
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3800
|
+
var textStyles = /*#__PURE__*/styled.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) {
|
|
3801
|
+
var theme = _ref.theme;
|
|
3802
|
+
return theme.fonts.desktop.weights.body[1];
|
|
3803
|
+
}, function (_ref2) {
|
|
3804
|
+
var theme = _ref2.theme;
|
|
3805
|
+
return theme.fonts.desktop.sizes.altHeaders[6];
|
|
3806
|
+
}, function (_ref3) {
|
|
3807
|
+
var theme = _ref3.theme;
|
|
3808
|
+
return theme.spacing[7];
|
|
3809
|
+
});
|
|
3810
|
+
var Input$1 = /*#__PURE__*/styled__default.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) {
|
|
3811
|
+
var width = _ref4.width;
|
|
3812
|
+
return width ? width + 'px' : '196px';
|
|
3813
|
+
}, function (_ref5) {
|
|
3814
|
+
var theme = _ref5.theme;
|
|
3815
|
+
return theme.colors.darkgrey;
|
|
3816
|
+
}, function (_ref6) {
|
|
3817
|
+
var error = _ref6.error,
|
|
3818
|
+
theme = _ref6.theme;
|
|
3819
|
+
if (!error) return;
|
|
3820
|
+
return "\n border: 1px solid " + theme.colors.error + ";\n ";
|
|
3821
|
+
}, function (_ref7) {
|
|
3822
|
+
var theme = _ref7.theme;
|
|
3823
|
+
return theme.colors.lightgrey;
|
|
3824
|
+
}, function (_ref8) {
|
|
3825
|
+
var darkMode = _ref8.darkMode,
|
|
3826
|
+
theme = _ref8.theme;
|
|
3827
|
+
if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
|
|
3828
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
3829
|
+
});
|
|
3830
|
+
var TextLabel$2 = /*#__PURE__*/styled__default.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
|
|
3831
|
+
var darkMode = _ref9.darkMode,
|
|
3832
|
+
theme = _ref9.theme;
|
|
3833
|
+
return darkMode ? theme.colors.white : theme.colors.black;
|
|
3834
|
+
});
|
|
3835
|
+
var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
|
|
3836
|
+
var darkMode = _ref10.darkMode,
|
|
3837
|
+
theme = _ref10.theme;
|
|
3838
|
+
return darkMode ? theme.colors.white : theme.colors.error;
|
|
3839
|
+
});
|
|
3840
|
+
|
|
3841
|
+
/**
|
|
3842
|
+
* # IMPORTANT
|
|
3843
|
+
* Please use the `<TextField />` component instead of this component if possible.
|
|
3844
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3845
|
+
* */
|
|
3846
|
+
|
|
3847
|
+
var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
3848
|
+
var label = _ref.label,
|
|
3849
|
+
error = _ref.error,
|
|
3850
|
+
_ref$darkMode = _ref.darkMode,
|
|
3851
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3852
|
+
width = _ref.width,
|
|
3853
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
|
|
3854
|
+
|
|
3855
|
+
return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3856
|
+
darkMode: darkMode,
|
|
3857
|
+
"data-testid": "text-field-text-label"
|
|
3858
|
+
}, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
|
|
3859
|
+
type: "text",
|
|
3860
|
+
error: error,
|
|
3861
|
+
darkMode: darkMode,
|
|
3862
|
+
"data-testid": "text-field-input",
|
|
3863
|
+
width: width
|
|
3864
|
+
}, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3865
|
+
darkMode: darkMode,
|
|
3866
|
+
"data-testid": "text-field-error-label"
|
|
3867
|
+
}, error) : null);
|
|
3868
|
+
};
|
|
3869
|
+
|
|
3870
|
+
var _templateObject$r, _templateObject2$e;
|
|
3871
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.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) {
|
|
3768
3872
|
var iconName = _ref.iconName;
|
|
3769
3873
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3770
3874
|
}, function (_ref2) {
|
|
3771
3875
|
var color = _ref2.color;
|
|
3772
3876
|
return color;
|
|
3773
3877
|
});
|
|
3774
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3878
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled__default.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"])));
|
|
3775
3879
|
|
|
3776
3880
|
var TextLink = function TextLink(_ref) {
|
|
3777
3881
|
var children = _ref.children,
|
|
@@ -3793,20 +3897,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3793
3897
|
})) : null);
|
|
3794
3898
|
};
|
|
3795
3899
|
|
|
3796
|
-
var _templateObject$
|
|
3797
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3900
|
+
var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3901
|
+
var LogoWrapper = /*#__PURE__*/styled__default.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) {
|
|
3798
3902
|
var fontSize = _ref.fontSize;
|
|
3799
3903
|
return fontSize + 'px';
|
|
3800
3904
|
}, function (_ref2) {
|
|
3801
3905
|
var color = _ref2.color;
|
|
3802
3906
|
return color;
|
|
3803
3907
|
});
|
|
3804
|
-
var LogoRightSide = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3805
|
-
var LogoLeftSide = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3908
|
+
var LogoRightSide = /*#__PURE__*/styled__default.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"])));
|
|
3909
|
+
var LogoLeftSide = /*#__PURE__*/styled__default.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) {
|
|
3806
3910
|
var color = _ref3.color;
|
|
3807
3911
|
return color;
|
|
3808
3912
|
});
|
|
3809
|
-
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3913
|
+
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3810
3914
|
|
|
3811
3915
|
var TextLogoProduct;
|
|
3812
3916
|
|
|
@@ -3828,12 +3932,12 @@ var Logo = function Logo(_ref) {
|
|
|
3828
3932
|
}, /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/React.createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/React.createElement(LogoRightSide, null, productName));
|
|
3829
3933
|
};
|
|
3830
3934
|
|
|
3831
|
-
var _templateObject$
|
|
3832
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3935
|
+
var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7;
|
|
3936
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3833
3937
|
var dark = _ref.dark;
|
|
3834
3938
|
return dark ? 'white' : 'errorstate';
|
|
3835
3939
|
});
|
|
3836
|
-
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
3940
|
+
var TickboxLabel$1 = /*#__PURE__*/styled__default.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) {
|
|
3837
3941
|
var dark = _ref2.dark,
|
|
3838
3942
|
disabled = _ref2.disabled;
|
|
3839
3943
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3842,7 +3946,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$f || (_
|
|
|
3842
3946
|
var disabled = _ref3.disabled;
|
|
3843
3947
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3844
3948
|
}, devices.mobileAndTablet);
|
|
3845
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
3949
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.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) {
|
|
3846
3950
|
var dark = _ref4.dark,
|
|
3847
3951
|
disabled = _ref4.disabled,
|
|
3848
3952
|
error = _ref4.error;
|
|
@@ -3858,7 +3962,7 @@ var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$9 || (
|
|
|
3858
3962
|
dark = _ref6.dark;
|
|
3859
3963
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3860
3964
|
}, devices.mobile);
|
|
3861
|
-
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
3965
|
+
var TickboxInput = /*#__PURE__*/styled__default.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) {
|
|
3862
3966
|
var dark = _ref7.dark,
|
|
3863
3967
|
whiteBox = _ref7.whiteBox,
|
|
3864
3968
|
disabled = _ref7.disabled;
|
|
@@ -3950,9 +4054,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3950
4054
|
}, error)));
|
|
3951
4055
|
};
|
|
3952
4056
|
|
|
3953
|
-
var _templateObject$
|
|
3954
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3955
|
-
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4057
|
+
var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
|
|
4058
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4059
|
+
var Tickbox$1 = /*#__PURE__*/styled__default.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) {
|
|
3956
4060
|
var error = _ref.error,
|
|
3957
4061
|
darkMode = _ref.darkMode,
|
|
3958
4062
|
disabled = _ref.disabled;
|
|
@@ -3975,7 +4079,7 @@ var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templat
|
|
|
3975
4079
|
if (blackBox) return 'var(--base-color-white)';
|
|
3976
4080
|
return ' var(--base-color-black)';
|
|
3977
4081
|
});
|
|
3978
|
-
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$
|
|
4082
|
+
var TickboxLabel$2 = /*#__PURE__*/styled__default.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) {
|
|
3979
4083
|
var blackBox = _ref4.blackBox,
|
|
3980
4084
|
darkMode = _ref4.darkMode;
|
|
3981
4085
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -3986,8 +4090,8 @@ var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$a || (_
|
|
|
3986
4090
|
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3987
4091
|
return '3px solid var(--base-color-lapislazuli)';
|
|
3988
4092
|
});
|
|
3989
|
-
var TickboxIcon = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3990
|
-
var TextLabel$
|
|
4093
|
+
var TickboxIcon = /*#__PURE__*/styled__default.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);
|
|
4094
|
+
var TextLabel$3 = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3991
4095
|
var darkMode = _ref6.darkMode,
|
|
3992
4096
|
disabled = _ref6.disabled;
|
|
3993
4097
|
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
@@ -3995,7 +4099,7 @@ var TextLabel$2 = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templ
|
|
|
3995
4099
|
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3996
4100
|
return 'var(--base-color-black)';
|
|
3997
4101
|
});
|
|
3998
|
-
var ErrorLabel$
|
|
4102
|
+
var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3999
4103
|
var darkMode = _ref7.darkMode;
|
|
4000
4104
|
if (darkMode) return 'var(--base-color-white)';
|
|
4001
4105
|
return 'var(--base-color-errorstate)';
|
|
@@ -4047,13 +4151,13 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4047
4151
|
blackBox: blackBox
|
|
4048
4152
|
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4049
4153
|
iconName: "Tick"
|
|
4050
|
-
}))), /*#__PURE__*/React__default.createElement(TextLabel$
|
|
4154
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
4051
4155
|
disabled: disabled,
|
|
4052
4156
|
darkMode: darkMode,
|
|
4053
4157
|
"data-testid": "tickbox-content"
|
|
4054
4158
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4055
4159
|
level: 1
|
|
4056
|
-
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
4160
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
4057
4161
|
darkMode: darkMode,
|
|
4058
4162
|
"data-testid": "tickbox-error-label"
|
|
4059
4163
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -4061,18 +4165,18 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4061
4165
|
}, error)));
|
|
4062
4166
|
});
|
|
4063
4167
|
|
|
4064
|
-
var _templateObject$
|
|
4065
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4168
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4169
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4066
4170
|
var color = _ref.color;
|
|
4067
4171
|
return color;
|
|
4068
4172
|
});
|
|
4069
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4173
|
+
var Line = /*#__PURE__*/styled__default.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) {
|
|
4070
4174
|
var color = _ref2.color;
|
|
4071
4175
|
return color;
|
|
4072
4176
|
}, devices.mobileAndTablet);
|
|
4073
|
-
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4074
|
-
var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4075
|
-
var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
4177
|
+
var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4178
|
+
var ValuesWrapper = /*#__PURE__*/styled__default.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);
|
|
4179
|
+
var TimerLabel = /*#__PURE__*/styled__default.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"])));
|
|
4076
4180
|
var TimerValueSeparator = /*#__PURE__*/styled__default.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);
|
|
4077
4181
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4078
4182
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -4170,8 +4274,8 @@ var Timer = function Timer(_ref) {
|
|
|
4170
4274
|
}));
|
|
4171
4275
|
};
|
|
4172
4276
|
|
|
4173
|
-
var _templateObject$
|
|
4174
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4277
|
+
var _templateObject$w;
|
|
4278
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.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"])));
|
|
4175
4279
|
|
|
4176
4280
|
var TypeTags = function TypeTags(_ref) {
|
|
4177
4281
|
var list = _ref.list;
|
|
@@ -4913,12 +5017,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
4913
5017
|
}
|
|
4914
5018
|
});
|
|
4915
5019
|
|
|
4916
|
-
var _templateObject$
|
|
4917
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
4918
|
-
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
4919
|
-
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
4920
|
-
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
4921
|
-
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5020
|
+
var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5021
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.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"])));
|
|
5022
|
+
var VideoFullscreenButton = /*#__PURE__*/styled__default.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"])));
|
|
5023
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5024
|
+
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.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"])));
|
|
5025
|
+
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4922
5026
|
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4923
5027
|
var VideoMute = /*#__PURE__*/styled__default.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"])));
|
|
4924
5028
|
var thumbStyles = /*#__PURE__*/styled.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"])));
|
|
@@ -5121,13 +5225,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5121
5225
|
})));
|
|
5122
5226
|
};
|
|
5123
5227
|
|
|
5124
|
-
var _templateObject$
|
|
5125
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5126
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5228
|
+
var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
|
|
5229
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5230
|
+
var StepperError = /*#__PURE__*/styled__default.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) {
|
|
5127
5231
|
var darkMode = _ref.darkMode;
|
|
5128
5232
|
return darkMode ? 'white' : 'errorstate';
|
|
5129
5233
|
});
|
|
5130
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5234
|
+
var StepperBox = /*#__PURE__*/styled__default.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) {
|
|
5131
5235
|
var darkMode = _ref2.darkMode,
|
|
5132
5236
|
disabled = _ref2.disabled,
|
|
5133
5237
|
error = _ref2.error;
|
|
@@ -5149,11 +5253,11 @@ var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templa
|
|
|
5149
5253
|
var disabled = _ref6.disabled;
|
|
5150
5254
|
return disabled ? 'midgrey' : 'black';
|
|
5151
5255
|
});
|
|
5152
|
-
var StepperValue = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
5256
|
+
var StepperValue = /*#__PURE__*/styled__default.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) {
|
|
5153
5257
|
var disabled = _ref7.disabled;
|
|
5154
5258
|
return disabled ? 'not-allowed' : 'text';
|
|
5155
5259
|
});
|
|
5156
|
-
var StepperButton = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5260
|
+
var StepperButton = /*#__PURE__*/styled__default.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) {
|
|
5157
5261
|
var disabled = _ref8.disabled;
|
|
5158
5262
|
return disabled ? 'not-allowed' : 'pointer';
|
|
5159
5263
|
});
|
|
@@ -5349,18 +5453,18 @@ var Component = function Component(_ref) {
|
|
|
5349
5453
|
}, error)));
|
|
5350
5454
|
};
|
|
5351
5455
|
|
|
5352
|
-
var _templateObject$
|
|
5353
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5456
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5457
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5354
5458
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5355
5459
|
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 ";
|
|
5356
5460
|
});
|
|
5357
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5358
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
5359
|
-
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5461
|
+
var FullScreenContainer = /*#__PURE__*/styled__default.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);
|
|
5462
|
+
var NavigationGrid = /*#__PURE__*/styled__default(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);
|
|
5463
|
+
var SearchBackground = /*#__PURE__*/styled__default.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) {
|
|
5360
5464
|
var visible = _ref2.visible;
|
|
5361
5465
|
return visible ? 'visible' : 'hidden';
|
|
5362
5466
|
}, zIndexes.search, devices.mobile);
|
|
5363
|
-
var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
5467
|
+
var GridItemSearch = /*#__PURE__*/styled__default(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) {
|
|
5364
5468
|
var visible = _ref3.visible;
|
|
5365
5469
|
return visible ? 'visible' : 'hidden';
|
|
5366
5470
|
}, zIndexes.search, devices.mobile);
|
|
@@ -5374,8 +5478,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_temp
|
|
|
5374
5478
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5375
5479
|
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
5376
5480
|
|
|
5377
|
-
var _templateObject$
|
|
5378
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5481
|
+
var _templateObject$A;
|
|
5482
|
+
var LogoWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
5379
5483
|
|
|
5380
5484
|
var Logo$1 = function Logo(_ref) {
|
|
5381
5485
|
var _ref$id = _ref.id,
|
|
@@ -5404,11 +5508,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
5404
5508
|
}))));
|
|
5405
5509
|
};
|
|
5406
5510
|
|
|
5407
|
-
var _templateObject$
|
|
5408
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5511
|
+
var _templateObject$B;
|
|
5512
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.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);
|
|
5409
5513
|
|
|
5410
|
-
var _templateObject$
|
|
5411
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5514
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$g, _templateObject4$d;
|
|
5515
|
+
var BasketContainer = /*#__PURE__*/styled__default.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) {
|
|
5412
5516
|
var selected = _ref.selected,
|
|
5413
5517
|
colorPrimary = _ref.colorPrimary;
|
|
5414
5518
|
|
|
@@ -5436,9 +5540,9 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
|
|
|
5436
5540
|
|
|
5437
5541
|
return '';
|
|
5438
5542
|
});
|
|
5439
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5440
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5441
|
-
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
5543
|
+
var SvgContainer = /*#__PURE__*/styled__default.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"])));
|
|
5544
|
+
var NumContainer = /*#__PURE__*/styled__default.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"])));
|
|
5545
|
+
var BasketText = /*#__PURE__*/styled__default.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"])));
|
|
5442
5546
|
|
|
5443
5547
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
5444
5548
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -5596,8 +5700,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5596
5700
|
}, expiryTime ? basketText : text) : ''));
|
|
5597
5701
|
};
|
|
5598
5702
|
|
|
5599
|
-
var _templateObject$
|
|
5600
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5703
|
+
var _templateObject$D, _templateObject2$n;
|
|
5704
|
+
var SearchContainer = /*#__PURE__*/styled__default.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) {
|
|
5601
5705
|
var selected = _ref.selected,
|
|
5602
5706
|
colorPrimary = _ref.colorPrimary;
|
|
5603
5707
|
|
|
@@ -5613,7 +5717,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_te
|
|
|
5613
5717
|
var colorPrimary = _ref3.colorPrimary;
|
|
5614
5718
|
return colorPrimary;
|
|
5615
5719
|
});
|
|
5616
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5720
|
+
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5617
5721
|
|
|
5618
5722
|
var Search$1 = function Search(_ref) {
|
|
5619
5723
|
var _ref$selected = _ref.selected,
|
|
@@ -5889,23 +5993,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
5889
5993
|
}));
|
|
5890
5994
|
};
|
|
5891
5995
|
|
|
5892
|
-
var _templateObject$
|
|
5893
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5894
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5996
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$e;
|
|
5997
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
5998
|
+
var ItemsContainer = /*#__PURE__*/styled__default.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) {
|
|
5895
5999
|
if (props.showMenu) {
|
|
5896
6000
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5897
6001
|
}
|
|
5898
6002
|
|
|
5899
6003
|
return "display: none;";
|
|
5900
6004
|
});
|
|
5901
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6005
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.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) {
|
|
5902
6006
|
var colorPrimary = _ref.colorPrimary;
|
|
5903
6007
|
return colorPrimary;
|
|
5904
6008
|
}, function (_ref2) {
|
|
5905
6009
|
var colorPrimary = _ref2.colorPrimary;
|
|
5906
6010
|
return colorPrimary;
|
|
5907
6011
|
}, devices.mobileAndTablet);
|
|
5908
|
-
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6012
|
+
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5909
6013
|
|
|
5910
6014
|
var Tabs = function Tabs(_ref) {
|
|
5911
6015
|
var _ref$items = _ref.items,
|
|
@@ -6032,11 +6136,11 @@ var Tabs = function Tabs(_ref) {
|
|
|
6032
6136
|
}, "MENU"))));
|
|
6033
6137
|
};
|
|
6034
6138
|
|
|
6035
|
-
var _templateObject$
|
|
6036
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6037
|
-
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6038
|
-
var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6039
|
-
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6139
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6140
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.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);
|
|
6141
|
+
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
6142
|
+
var SvgContainerClose = /*#__PURE__*/styled__default.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"])));
|
|
6143
|
+
var InputContainer = /*#__PURE__*/styled__default.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);
|
|
6040
6144
|
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6041
6145
|
var SearchArrowContainer = /*#__PURE__*/styled__default.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);
|
|
6042
6146
|
|
|
@@ -6270,18 +6374,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
6270
6374
|
})))));
|
|
6271
6375
|
};
|
|
6272
6376
|
|
|
6273
|
-
var _templateObject$
|
|
6274
|
-
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$
|
|
6275
|
-
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6276
|
-
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6277
|
-
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6278
|
-
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6377
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
|
|
6378
|
+
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
6379
|
+
var FooterContainer = /*#__PURE__*/styled__default.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"])));
|
|
6380
|
+
var PolicyLinksRow = /*#__PURE__*/styled__default.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);
|
|
6381
|
+
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6382
|
+
var ArtsLogoRow = /*#__PURE__*/styled__default.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);
|
|
6279
6383
|
var AdditionalInfo = /*#__PURE__*/styled__default.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);
|
|
6280
6384
|
|
|
6281
|
-
var _templateObject$
|
|
6282
|
-
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
6283
|
-
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$
|
|
6284
|
-
var PolicyLink = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
6385
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$k;
|
|
6386
|
+
var PolicyLinksList = /*#__PURE__*/styled__default.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);
|
|
6387
|
+
var PolicyLinkItem = /*#__PURE__*/styled__default.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);
|
|
6388
|
+
var PolicyLink = /*#__PURE__*/styled__default.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"])));
|
|
6285
6389
|
|
|
6286
6390
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6287
6391
|
var _ref$items = _ref.items,
|
|
@@ -6297,12 +6401,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6297
6401
|
}));
|
|
6298
6402
|
};
|
|
6299
6403
|
|
|
6300
|
-
var _templateObject$
|
|
6301
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6302
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6303
|
-
var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6304
|
-
var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$
|
|
6305
|
-
var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6404
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6405
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.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);
|
|
6406
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.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);
|
|
6407
|
+
var SignUpWrapper = /*#__PURE__*/styled__default.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);
|
|
6408
|
+
var SignUpText = /*#__PURE__*/styled__default.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);
|
|
6409
|
+
var ContactWrapper = /*#__PURE__*/styled__default.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);
|
|
6306
6410
|
var MediaLinksWrapper = /*#__PURE__*/styled__default.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);
|
|
6307
6411
|
var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
6308
6412
|
var TextLinkWrapper$1 = /*#__PURE__*/styled__default.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"])));
|
|
@@ -6369,15 +6473,15 @@ var Footer = function Footer(_ref) {
|
|
|
6369
6473
|
}, additionalInfo)))));
|
|
6370
6474
|
};
|
|
6371
6475
|
|
|
6372
|
-
var _templateObject$
|
|
6476
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
|
|
6373
6477
|
var LIST_ITEM_GAP = 32;
|
|
6374
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6478
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.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) {
|
|
6375
6479
|
var bottomBorder = _ref.bottomBorder;
|
|
6376
6480
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6377
6481
|
}, zIndexes.anchor);
|
|
6378
|
-
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6379
|
-
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6380
|
-
var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$
|
|
6482
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6483
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6484
|
+
var TabsList = /*#__PURE__*/styled__default.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) {
|
|
6381
6485
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
6382
6486
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6383
6487
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -6388,7 +6492,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$g || (_templateO
|
|
|
6388
6492
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6389
6493
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6390
6494
|
});
|
|
6391
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6495
|
+
var ArrowsContainer = /*#__PURE__*/styled__default.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) {
|
|
6392
6496
|
var fullWidth = _ref5.fullWidth;
|
|
6393
6497
|
return fullWidth ? '74px' : '46px';
|
|
6394
6498
|
});
|
|
@@ -6635,17 +6739,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6635
6739
|
})) : null) : null))));
|
|
6636
6740
|
};
|
|
6637
6741
|
|
|
6638
|
-
var _templateObject$
|
|
6639
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6742
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6743
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.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) {
|
|
6640
6744
|
var sticky = _ref.sticky;
|
|
6641
6745
|
return sticky ? 'sticky' : 'initial';
|
|
6642
6746
|
}, zIndexes.anchor);
|
|
6643
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6644
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6747
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6748
|
+
var TitleCTAGridItem = /*#__PURE__*/styled__default.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) {
|
|
6645
6749
|
var title = _ref2.title;
|
|
6646
6750
|
return title ? 'row' : 'row-reverse';
|
|
6647
6751
|
}, devices.tablet, devices.mobile);
|
|
6648
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6752
|
+
var AnchorTitle = /*#__PURE__*/styled__default.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);
|
|
6649
6753
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.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);
|
|
6650
6754
|
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6651
6755
|
var PrimaryButtonReverse = /*#__PURE__*/styled__default(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) {
|
|
@@ -6696,15 +6800,15 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6696
6800
|
}, message)));
|
|
6697
6801
|
};
|
|
6698
6802
|
|
|
6699
|
-
var _templateObject$
|
|
6700
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6701
|
-
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6702
|
-
var PromoLabel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6803
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6804
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.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);
|
|
6805
|
+
var PromoLabelWrapper = /*#__PURE__*/styled__default.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"])));
|
|
6806
|
+
var PromoLabel = /*#__PURE__*/styled__default.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) {
|
|
6703
6807
|
var theme = _ref.theme;
|
|
6704
6808
|
return theme.colors.primary;
|
|
6705
6809
|
}, exports.Colors.White);
|
|
6706
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6707
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6810
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6811
|
+
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6708
6812
|
var OfferTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6709
6813
|
var PriceRow = /*#__PURE__*/styled__default.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"])));
|
|
6710
6814
|
var LineThrough = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
@@ -6777,8 +6881,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
6777
6881
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
6778
6882
|
};
|
|
6779
6883
|
|
|
6780
|
-
var _templateObject$
|
|
6781
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6884
|
+
var _templateObject$M;
|
|
6885
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.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);
|
|
6782
6886
|
|
|
6783
6887
|
var UpsellCards = function UpsellCards(_ref) {
|
|
6784
6888
|
var upsellCards = _ref.upsellCards;
|
|
@@ -6796,20 +6900,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
6796
6900
|
}));
|
|
6797
6901
|
};
|
|
6798
6902
|
|
|
6799
|
-
var _templateObject$
|
|
6800
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6903
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$p;
|
|
6904
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.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) {
|
|
6801
6905
|
var theme = _ref.theme;
|
|
6802
6906
|
return theme.colors.primary;
|
|
6803
6907
|
}, devices.mobile, devices.tablet);
|
|
6804
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6805
|
-
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6908
|
+
var TitleContainer$2 = /*#__PURE__*/styled__default.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);
|
|
6909
|
+
var TextContainer = /*#__PURE__*/styled__default.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);
|
|
6806
6910
|
|
|
6807
|
-
var _templateObject$
|
|
6808
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6809
|
-
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6810
|
-
var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6811
|
-
var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6812
|
-
var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6911
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
|
|
6912
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
6913
|
+
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
6914
|
+
var ChildrenContainer = /*#__PURE__*/styled__default.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);
|
|
6915
|
+
var TitleContainer$3 = /*#__PURE__*/styled__default.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);
|
|
6916
|
+
var ContentContainer = /*#__PURE__*/styled__default.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);
|
|
6813
6917
|
|
|
6814
6918
|
var Accordion = function Accordion(_ref) {
|
|
6815
6919
|
var _ref$title = _ref.title,
|
|
@@ -6934,8 +7038,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6934
7038
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6935
7039
|
};
|
|
6936
7040
|
|
|
6937
|
-
var _templateObject$
|
|
6938
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7041
|
+
var _templateObject$P;
|
|
7042
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6939
7043
|
|
|
6940
7044
|
var Accordions = function Accordions(_ref) {
|
|
6941
7045
|
var _ref$items = _ref.items,
|
|
@@ -6953,7 +7057,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6953
7057
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6954
7058
|
contentType: accordion.contentType,
|
|
6955
7059
|
displayLevel: accordion.displayLevel,
|
|
6956
|
-
semanticLevel: accordion.semanticLevel
|
|
7060
|
+
semanticLevel: accordion.semanticLevel,
|
|
7061
|
+
initOpen: accordion.initOpen
|
|
6957
7062
|
}, accordion.children);
|
|
6958
7063
|
}));
|
|
6959
7064
|
};
|
|
@@ -6967,13 +7072,13 @@ var Theme = function Theme(_ref) {
|
|
|
6967
7072
|
}, children);
|
|
6968
7073
|
};
|
|
6969
7074
|
|
|
6970
|
-
var _templateObject$
|
|
6971
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7075
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r;
|
|
7076
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.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) {
|
|
6972
7077
|
var theme = _ref.theme;
|
|
6973
7078
|
return theme.colors.primary;
|
|
6974
7079
|
}, devices.mobile);
|
|
6975
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6976
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7080
|
+
var SvgContainer$2 = /*#__PURE__*/styled__default.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);
|
|
7081
|
+
var ContentContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
6977
7082
|
|
|
6978
7083
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
6979
7084
|
var title = _ref.title,
|
|
@@ -7010,8 +7115,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7010
7115
|
}))))));
|
|
7011
7116
|
};
|
|
7012
7117
|
|
|
7013
|
-
var _templateObject$
|
|
7014
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
7118
|
+
var _templateObject$R;
|
|
7119
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(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) {
|
|
7015
7120
|
var bgColor = _ref.bgColor,
|
|
7016
7121
|
theme = _ref.theme;
|
|
7017
7122
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7032,32 +7137,32 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7032
7137
|
}), children);
|
|
7033
7138
|
};
|
|
7034
7139
|
|
|
7035
|
-
var _templateObject$
|
|
7140
|
+
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;
|
|
7036
7141
|
var LENGTH_LARGE_TEXT = 28;
|
|
7037
7142
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7038
7143
|
var LENGTH_TEXT_TABLET = 10;
|
|
7039
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7144
|
+
var CardContainer = /*#__PURE__*/styled__default.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) {
|
|
7040
7145
|
var isCardClickable = _ref.isCardClickable;
|
|
7041
7146
|
return isCardClickable ? 'pointer' : 'default';
|
|
7042
7147
|
}, function (_ref2) {
|
|
7043
7148
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7044
7149
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7045
7150
|
});
|
|
7046
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7151
|
+
var HoverContainer = /*#__PURE__*/styled__default.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) {
|
|
7047
7152
|
var lineColor = _ref3.lineColor,
|
|
7048
7153
|
theme = _ref3.theme;
|
|
7049
7154
|
if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
|
|
7050
7155
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7051
7156
|
}, zIndexes.contentOverlay);
|
|
7052
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7053
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7157
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7158
|
+
var ContentContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
7054
7159
|
var fullWidth = _ref4.fullWidth;
|
|
7055
7160
|
return fullWidth ? '0' : '20px';
|
|
7056
7161
|
}, function (_ref5) {
|
|
7057
7162
|
var fullWidth = _ref5.fullWidth;
|
|
7058
7163
|
return fullWidth ? '0' : '20px';
|
|
7059
7164
|
});
|
|
7060
|
-
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7165
|
+
var TitleContainer$4 = /*#__PURE__*/styled__default.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);
|
|
7061
7166
|
var TitleContainerMobile = /*#__PURE__*/styled__default.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);
|
|
7062
7167
|
var TextContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
7063
7168
|
var HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$1)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
@@ -7318,9 +7423,9 @@ var Card = function Card(_ref) {
|
|
|
7318
7423
|
dangerouslySetInnerHTML: {
|
|
7319
7424
|
__html: truncatedText
|
|
7320
7425
|
}
|
|
7321
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7426
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7322
7427
|
level: 1
|
|
7323
|
-
}, highlightText))
|
|
7428
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7324
7429
|
fullWidth: fullWidth
|
|
7325
7430
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7326
7431
|
ref: node,
|
|
@@ -7334,9 +7439,9 @@ var Card = function Card(_ref) {
|
|
|
7334
7439
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7335
7440
|
};
|
|
7336
7441
|
|
|
7337
|
-
var _templateObject$
|
|
7338
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7339
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
7442
|
+
var _templateObject$T, _templateObject2$A;
|
|
7443
|
+
var CardsContainer = /*#__PURE__*/styled__default(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);
|
|
7444
|
+
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7340
7445
|
|
|
7341
7446
|
var Cards = function Cards(_ref) {
|
|
7342
7447
|
var cards = _ref.cards,
|
|
@@ -7381,18 +7486,18 @@ var Cards = function Cards(_ref) {
|
|
|
7381
7486
|
}));
|
|
7382
7487
|
};
|
|
7383
7488
|
|
|
7384
|
-
var _templateObject$
|
|
7385
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7386
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7489
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
|
|
7490
|
+
var ContentWrapper = /*#__PURE__*/styled__default.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);
|
|
7491
|
+
var Wrapper$4 = /*#__PURE__*/styled__default.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) {
|
|
7387
7492
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7388
7493
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7389
7494
|
}, function (_ref2) {
|
|
7390
7495
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7391
7496
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7392
7497
|
}, devices.mobileAndTablet);
|
|
7393
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7394
|
-
var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7395
|
-
var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7498
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7499
|
+
var AddressWrapperMobile = /*#__PURE__*/styled__default.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);
|
|
7500
|
+
var DetailsWrapper = /*#__PURE__*/styled__default.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);
|
|
7396
7501
|
|
|
7397
7502
|
var divideAddressString = function divideAddressString(address) {
|
|
7398
7503
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7450,16 +7555,16 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7450
7555
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7451
7556
|
};
|
|
7452
7557
|
|
|
7453
|
-
var _templateObject$
|
|
7454
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
7455
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7558
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
|
|
7559
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7560
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled__default.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) {
|
|
7456
7561
|
return props.clickable ? 'pointer' : 'default';
|
|
7457
7562
|
}, devices.mobile);
|
|
7458
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7459
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7563
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7564
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7460
7565
|
return props.showImage ? 2 : '1 / span 4';
|
|
7461
7566
|
}, devices.mobile);
|
|
7462
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7567
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
7463
7568
|
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7464
7569
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7465
7570
|
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 ";
|
|
@@ -7533,21 +7638,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7533
7638
|
}), link.text)));
|
|
7534
7639
|
};
|
|
7535
7640
|
|
|
7536
|
-
var _templateObject$
|
|
7537
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7641
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
|
|
7642
|
+
var EditorialGrid = /*#__PURE__*/styled__default.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) {
|
|
7538
7643
|
var imageToLeft = _ref.imageToLeft;
|
|
7539
7644
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7540
7645
|
}, devices.mobile);
|
|
7541
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7646
|
+
var EditorialImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
7542
7647
|
var imageToLeft = _ref2.imageToLeft;
|
|
7543
7648
|
return imageToLeft ? 'left' : 'right';
|
|
7544
7649
|
}, devices.mobile);
|
|
7545
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7650
|
+
var EditorialTextWrapper = /*#__PURE__*/styled__default.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) {
|
|
7546
7651
|
var imageToLeft = _ref3.imageToLeft;
|
|
7547
7652
|
return imageToLeft ? 'right' : 'left';
|
|
7548
7653
|
}, devices.mobile);
|
|
7549
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
7550
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7654
|
+
var EditorialSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
7655
|
+
var EditorialText = /*#__PURE__*/styled__default.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"])));
|
|
7551
7656
|
|
|
7552
7657
|
var Editorial = function Editorial(_ref) {
|
|
7553
7658
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7611,10 +7716,10 @@ var BackgroundColour;
|
|
|
7611
7716
|
BackgroundColour["White"] = "white";
|
|
7612
7717
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
7613
7718
|
|
|
7614
|
-
var _templateObject$
|
|
7615
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
7616
|
-
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$
|
|
7617
|
-
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$
|
|
7719
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p;
|
|
7720
|
+
var InfoContent = /*#__PURE__*/styled__default('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"])));
|
|
7721
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7722
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7618
7723
|
if (!props.infoThemed) {
|
|
7619
7724
|
return;
|
|
7620
7725
|
} else {
|
|
@@ -7625,7 +7730,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (
|
|
|
7625
7730
|
}
|
|
7626
7731
|
}
|
|
7627
7732
|
});
|
|
7628
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
7733
|
+
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7629
7734
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7630
7735
|
}, function (props) {
|
|
7631
7736
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -7738,24 +7843,24 @@ var Information = function Information(_ref) {
|
|
|
7738
7843
|
}))));
|
|
7739
7844
|
};
|
|
7740
7845
|
|
|
7741
|
-
var _templateObject$
|
|
7742
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7846
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
|
|
7847
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.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) {
|
|
7743
7848
|
var theme = _ref.theme;
|
|
7744
7849
|
return theme.colors.primary;
|
|
7745
7850
|
}, function (_ref2) {
|
|
7746
7851
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7747
7852
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7748
7853
|
}, devices.mobile);
|
|
7749
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7750
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7854
|
+
var PageHeadingGrid = /*#__PURE__*/styled__default(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);
|
|
7855
|
+
var TitleWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
7751
7856
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7752
7857
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7753
7858
|
}, devices.mobile);
|
|
7754
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7859
|
+
var ChildrenWrapper = /*#__PURE__*/styled__default.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) {
|
|
7755
7860
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7756
7861
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7757
7862
|
}, devices.mobile);
|
|
7758
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7863
|
+
var TextWrapper = /*#__PURE__*/styled__default.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"])));
|
|
7759
7864
|
var LogoWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
7760
7865
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7761
7866
|
var PageHeadingText = /*#__PURE__*/styled__default.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"])));
|
|
@@ -7830,12 +7935,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7830
7935
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
7831
7936
|
};
|
|
7832
7937
|
|
|
7833
|
-
var _templateObject$
|
|
7834
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7835
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7836
|
-
var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
7837
|
-
var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7838
|
-
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7938
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
|
|
7939
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.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);
|
|
7940
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.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);
|
|
7941
|
+
var ImpactGrid = /*#__PURE__*/styled__default(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);
|
|
7942
|
+
var SponsorWrapper = /*#__PURE__*/styled__default.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);
|
|
7943
|
+
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7839
7944
|
var TextWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7840
7945
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
7841
7946
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -7901,21 +8006,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7901
8006
|
}, "Scroll Down")) : null);
|
|
7902
8007
|
};
|
|
7903
8008
|
|
|
7904
|
-
var _templateObject$
|
|
7905
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8009
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
|
|
8010
|
+
var PanelGrid = /*#__PURE__*/styled__default(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) {
|
|
7906
8011
|
var color = _ref.color;
|
|
7907
8012
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7908
8013
|
}, devices.mobileAndTablet);
|
|
7909
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8014
|
+
var LeftPanel = /*#__PURE__*/styled__default.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) {
|
|
7910
8015
|
var hasImage = _ref2.hasImage;
|
|
7911
8016
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7912
8017
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7913
8018
|
var hasImage = _ref3.hasImage;
|
|
7914
8019
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7915
8020
|
});
|
|
7916
|
-
var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7917
|
-
var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7918
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8021
|
+
var RightPanel = /*#__PURE__*/styled__default.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);
|
|
8022
|
+
var InfoWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
8023
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.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);
|
|
7919
8024
|
|
|
7920
8025
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7921
8026
|
var _image$src, _image$alt;
|
|
@@ -7946,8 +8051,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7946
8051
|
}))));
|
|
7947
8052
|
};
|
|
7948
8053
|
|
|
7949
|
-
var _templateObject
|
|
7950
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8054
|
+
var _templateObject$$;
|
|
8055
|
+
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7951
8056
|
|
|
7952
8057
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7953
8058
|
var link = _ref.link,
|
|
@@ -7965,11 +8070,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7965
8070
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
7966
8071
|
};
|
|
7967
8072
|
|
|
7968
|
-
var _templateObject$
|
|
7969
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7970
|
-
var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$
|
|
7971
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7972
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8073
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8074
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.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);
|
|
8075
|
+
var BrandingTextBody = /*#__PURE__*/styled__default.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"])));
|
|
8076
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8077
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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);
|
|
7973
8078
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(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) {
|
|
7974
8079
|
var invert = _ref.invert,
|
|
7975
8080
|
theme = _ref.theme;
|
|
@@ -8100,7 +8205,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8100
8205
|
var isIOS = function isIOS() {
|
|
8101
8206
|
try {
|
|
8102
8207
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8103
|
-
if (typeof navigator === undefined) return false;
|
|
8208
|
+
if (typeof navigator === 'undefined') return false;
|
|
8104
8209
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8105
8210
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8106
8211
|
} catch (e) {
|
|
@@ -8116,7 +8221,7 @@ var useIOS = function useIOS() {
|
|
|
8116
8221
|
setIOS = _useState[1];
|
|
8117
8222
|
|
|
8118
8223
|
React.useEffect(function () {
|
|
8119
|
-
if (typeof navigator === undefined) return;
|
|
8224
|
+
if (typeof navigator === 'undefined') return;
|
|
8120
8225
|
setIOS(isIOS());
|
|
8121
8226
|
}, []);
|
|
8122
8227
|
return IOS;
|
|
@@ -8255,7 +8360,9 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8255
8360
|
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8256
8361
|
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8257
8362
|
brandingText = _ref4.brandingText,
|
|
8258
|
-
brandingLink = _ref4.brandingLink
|
|
8363
|
+
brandingLink = _ref4.brandingLink,
|
|
8364
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
8365
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
|
|
8259
8366
|
|
|
8260
8367
|
var _ref5 = link || {},
|
|
8261
8368
|
linkText = _ref5.text,
|
|
@@ -8281,7 +8388,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8281
8388
|
})) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
8282
8389
|
video: video,
|
|
8283
8390
|
poster: poster
|
|
8284
|
-
})), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8391
|
+
})), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8285
8392
|
className: "page-heading-compact__background",
|
|
8286
8393
|
invert: invert
|
|
8287
8394
|
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
@@ -8298,15 +8405,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8298
8405
|
}), linkText))));
|
|
8299
8406
|
};
|
|
8300
8407
|
|
|
8301
|
-
var _templateObject
|
|
8302
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject
|
|
8303
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
8408
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t;
|
|
8409
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8410
|
+
var PageNumberWrapper = /*#__PURE__*/styled__default.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
|
|
8304
8411
|
|
|
8305
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8412
|
+
var PageNumber = /*#__PURE__*/styled__default.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) {
|
|
8306
8413
|
var active = _ref.active;
|
|
8307
8414
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8308
8415
|
});
|
|
8309
|
-
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$
|
|
8416
|
+
var NextPage = /*#__PURE__*/styled__default(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"])));
|
|
8310
8417
|
|
|
8311
8418
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8312
8419
|
// If there are less than 6 pages, return all pages
|
|
@@ -8375,12 +8482,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8375
8482
|
}))));
|
|
8376
8483
|
};
|
|
8377
8484
|
|
|
8378
|
-
var _templateObject$
|
|
8379
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8380
|
-
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8381
|
-
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8382
|
-
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8383
|
-
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8485
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
|
|
8486
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(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);
|
|
8487
|
+
var PersonWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8488
|
+
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8489
|
+
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8490
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
8384
8491
|
var PersonLink = /*#__PURE__*/styled__default.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"])));
|
|
8385
8492
|
|
|
8386
8493
|
var Person = function Person(_ref) {
|
|
@@ -8432,11 +8539,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8432
8539
|
}));
|
|
8433
8540
|
};
|
|
8434
8541
|
|
|
8435
|
-
var _templateObject$
|
|
8436
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8437
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$
|
|
8438
|
-
var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8439
|
-
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8542
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v;
|
|
8543
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8544
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
8545
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8546
|
+
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8440
8547
|
|
|
8441
8548
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8442
8549
|
return array.reduce(function (acc, item) {
|
|
@@ -8447,12 +8554,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8447
8554
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8448
8555
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8449
8556
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8450
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8557
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8558
|
+
key: index
|
|
8559
|
+
}, title));
|
|
8451
8560
|
} else if (index > 0) {
|
|
8452
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8561
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8562
|
+
key: index
|
|
8563
|
+
}, ", ", title);
|
|
8453
8564
|
}
|
|
8454
8565
|
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8566
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8567
|
+
key: index
|
|
8568
|
+
}, title);
|
|
8456
8569
|
}));
|
|
8457
8570
|
};
|
|
8458
8571
|
|
|
@@ -8504,14 +8617,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8504
8617
|
}));
|
|
8505
8618
|
};
|
|
8506
8619
|
|
|
8507
|
-
var _templateObject$
|
|
8620
|
+
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;
|
|
8508
8621
|
var LENGTH_TEXT = 28;
|
|
8509
8622
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8510
8623
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8511
8624
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8512
8625
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8513
8626
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8514
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8627
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(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) {
|
|
8515
8628
|
var imageToLeft = _ref.imageToLeft;
|
|
8516
8629
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8517
8630
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8521,8 +8634,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8521
8634
|
var asCard = _ref3.asCard;
|
|
8522
8635
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8523
8636
|
});
|
|
8524
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8525
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8637
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
8638
|
+
var PromoWithTagsText = /*#__PURE__*/styled__default.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) {
|
|
8526
8639
|
var theme = _ref4.theme;
|
|
8527
8640
|
return theme.colors.black;
|
|
8528
8641
|
}, function (_ref5) {
|
|
@@ -8532,7 +8645,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$D || (
|
|
|
8532
8645
|
var theme = _ref6.theme;
|
|
8533
8646
|
return theme.colors.primary;
|
|
8534
8647
|
});
|
|
8535
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8648
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
8536
8649
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8537
8650
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8538
8651
|
}, function (_ref8) {
|
|
@@ -8560,7 +8673,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$v ||
|
|
|
8560
8673
|
|
|
8561
8674
|
return '';
|
|
8562
8675
|
});
|
|
8563
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8676
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8564
8677
|
var marginBottom = _ref10.marginBottom;
|
|
8565
8678
|
return marginBottom + "px";
|
|
8566
8679
|
});
|
|
@@ -8782,26 +8895,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8782
8895
|
}))));
|
|
8783
8896
|
};
|
|
8784
8897
|
|
|
8785
|
-
var _templateObject$
|
|
8898
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
8786
8899
|
var LENGTH_TEXT$2 = 28;
|
|
8787
8900
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8788
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8901
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(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) {
|
|
8789
8902
|
var imageToLeft = _ref.imageToLeft;
|
|
8790
8903
|
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'";
|
|
8791
8904
|
}, devices.tablet, function (_ref2) {
|
|
8792
8905
|
var imageToLeft = _ref2.imageToLeft;
|
|
8793
8906
|
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'";
|
|
8794
8907
|
}, devices.mobile);
|
|
8795
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8908
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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) {
|
|
8796
8909
|
var imageToLeft = _ref3.imageToLeft;
|
|
8797
8910
|
return imageToLeft ? 'left' : 'right';
|
|
8798
8911
|
}, devices.mobile);
|
|
8799
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8912
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.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) {
|
|
8800
8913
|
var imageToLeft = _ref4.imageToLeft;
|
|
8801
8914
|
return imageToLeft ? 'right' : 'left';
|
|
8802
8915
|
}, devices.mobile);
|
|
8803
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8804
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
8916
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled__default.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);
|
|
8917
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.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"])));
|
|
8805
8918
|
var PromoWithTitleText = /*#__PURE__*/styled__default.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) {
|
|
8806
8919
|
var theme = _ref5.theme;
|
|
8807
8920
|
return theme.colors.black;
|
|
@@ -8838,8 +8951,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
8838
8951
|
return '';
|
|
8839
8952
|
});
|
|
8840
8953
|
|
|
8841
|
-
var _templateObject$
|
|
8842
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8954
|
+
var _templateObject$16;
|
|
8955
|
+
var VideoContainer = /*#__PURE__*/styled__default.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) {
|
|
8843
8956
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8844
8957
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8845
8958
|
return aspectRatio;
|
|
@@ -8867,17 +8980,45 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8867
8980
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
8868
8981
|
};
|
|
8869
8982
|
|
|
8983
|
+
// Generates a random string in the format XXX-XXX. Does not meet UUID standards.
|
|
8984
|
+
// To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
8985
|
+
var generateId = function generateId() {
|
|
8986
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
8987
|
+
var datePart = Date.now().toString().slice(-3);
|
|
8988
|
+
return randomPart + "-" + datePart;
|
|
8989
|
+
};
|
|
8990
|
+
|
|
8870
8991
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8871
8992
|
var video = _ref.video,
|
|
8872
8993
|
settings = _ref.settings;
|
|
8873
|
-
var
|
|
8874
|
-
autoPlay = settings.autoPlay;
|
|
8994
|
+
var videoRef = React.useRef(null);
|
|
8875
8995
|
|
|
8876
8996
|
var _useState = React.useState(exports.AspectRatio['16:9']),
|
|
8877
8997
|
aspectRatio = _useState[0],
|
|
8878
8998
|
setAspectRatio = _useState[1];
|
|
8879
8999
|
|
|
8880
|
-
var
|
|
9000
|
+
var _React$useState = React__default.useState(false),
|
|
9001
|
+
isVideoReady = _React$useState[0],
|
|
9002
|
+
setIsVideoReady = _React$useState[1];
|
|
9003
|
+
|
|
9004
|
+
var muted = settings.muted,
|
|
9005
|
+
autoPlay = settings.autoPlay;
|
|
9006
|
+
React__default.useEffect(function () {
|
|
9007
|
+
var changeVideoReadiness = function changeVideoReadiness() {
|
|
9008
|
+
setIsVideoReady(true);
|
|
9009
|
+
};
|
|
9010
|
+
|
|
9011
|
+
if (videoRef.current) {
|
|
9012
|
+
videoRef.current.addEventListener('canplay', changeVideoReadiness);
|
|
9013
|
+
return function () {
|
|
9014
|
+
var _videoRef$current;
|
|
9015
|
+
|
|
9016
|
+
return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
|
|
9017
|
+
};
|
|
9018
|
+
}
|
|
9019
|
+
|
|
9020
|
+
return undefined;
|
|
9021
|
+
}, []);
|
|
8881
9022
|
|
|
8882
9023
|
var handleMetadataLoaded = function handleMetadataLoaded() {
|
|
8883
9024
|
if (videoRef.current) {
|
|
@@ -8886,18 +9027,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8886
9027
|
}
|
|
8887
9028
|
};
|
|
8888
9029
|
|
|
8889
|
-
var
|
|
9030
|
+
var videoElementId = React.useMemo(function () {
|
|
9031
|
+
return "video-id-" + generateId();
|
|
9032
|
+
}, []);
|
|
9033
|
+
var clonedVideo = /*#__PURE__*/React.cloneElement(video, _extends({
|
|
9034
|
+
playsInline: true
|
|
9035
|
+
}, muted ? {
|
|
8890
9036
|
muted: true
|
|
8891
9037
|
} : {}, autoPlay && muted ? {
|
|
8892
9038
|
autoPlay: true
|
|
8893
9039
|
} : {}, {
|
|
8894
9040
|
height: '100%',
|
|
8895
9041
|
width: '100%',
|
|
8896
|
-
onLoadedMetadata: handleMetadataLoaded
|
|
9042
|
+
onLoadedMetadata: handleMetadataLoaded,
|
|
9043
|
+
id: videoElementId
|
|
8897
9044
|
}, {
|
|
9045
|
+
poster: autoPlay && isVideoReady ? undefined : video.props.poster,
|
|
8898
9046
|
ref: videoRef
|
|
8899
9047
|
}));
|
|
8900
|
-
var videoElementId = clonedVideo.props.id;
|
|
8901
9048
|
var videoContainerId = "video-container-for-" + videoElementId;
|
|
8902
9049
|
|
|
8903
9050
|
var videoControlsProps = _extends({}, settings, {
|
|
@@ -8905,14 +9052,12 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8905
9052
|
videoContainerId: videoContainerId
|
|
8906
9053
|
});
|
|
8907
9054
|
|
|
8908
|
-
|
|
8909
|
-
setAspectRatio(exports.AspectRatio['16:9']);
|
|
8910
|
-
}, [video.props.src]);
|
|
9055
|
+
var showVideoControls = autoPlay ? isVideoReady : true;
|
|
8911
9056
|
return /*#__PURE__*/React__default.createElement(VideoContainer, {
|
|
8912
9057
|
aspectRatio: aspectRatio,
|
|
8913
9058
|
id: videoContainerId,
|
|
8914
|
-
"data-testid":
|
|
8915
|
-
}, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
9059
|
+
"data-testid": 'video-container'
|
|
9060
|
+
}, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
8916
9061
|
};
|
|
8917
9062
|
|
|
8918
9063
|
var PromoChild = function PromoChild(_ref) {
|
|
@@ -8999,8 +9144,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8999
9144
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9000
9145
|
};
|
|
9001
9146
|
|
|
9002
|
-
var _templateObject$
|
|
9003
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9147
|
+
var _templateObject$17;
|
|
9148
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9004
9149
|
|
|
9005
9150
|
/**
|
|
9006
9151
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9058,9 +9203,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9058
9203
|
})));
|
|
9059
9204
|
};
|
|
9060
9205
|
|
|
9061
|
-
var _templateObject$
|
|
9062
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9063
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9206
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$G;
|
|
9207
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9208
|
+
var RadioGroup$1 = /*#__PURE__*/styled__default.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) {
|
|
9064
9209
|
var horizontalMode = _ref.horizontalMode;
|
|
9065
9210
|
if (horizontalMode) return 'row';
|
|
9066
9211
|
return 'column';
|
|
@@ -9068,7 +9213,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$N || (_temp
|
|
|
9068
9213
|
var gap = _ref2.gap;
|
|
9069
9214
|
return gap + "px";
|
|
9070
9215
|
});
|
|
9071
|
-
var ErrorLabel$
|
|
9216
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9072
9217
|
var darkMode = _ref3.darkMode;
|
|
9073
9218
|
if (darkMode) return 'var(--base-color-white)';
|
|
9074
9219
|
return 'var(--base-color-errorstate)';
|
|
@@ -9140,7 +9285,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9140
9285
|
error: error !== undefined ? '' : undefined,
|
|
9141
9286
|
onChange: changeHandler
|
|
9142
9287
|
}, radio.content);
|
|
9143
|
-
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9288
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
9144
9289
|
darkMode: darkMode,
|
|
9145
9290
|
"data-testid": "radio-group-error-label"
|
|
9146
9291
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9148,10 +9293,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9148
9293
|
}, error)));
|
|
9149
9294
|
};
|
|
9150
9295
|
|
|
9151
|
-
var _templateObject$
|
|
9152
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9153
|
-
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9154
|
-
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9296
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$H;
|
|
9297
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.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);
|
|
9298
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.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"])));
|
|
9299
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.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);
|
|
9155
9300
|
|
|
9156
9301
|
var StatusBanner = function StatusBanner(_ref) {
|
|
9157
9302
|
var statusText = _ref.statusText,
|
|
@@ -9213,8 +9358,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9213
9358
|
})))));
|
|
9214
9359
|
};
|
|
9215
9360
|
|
|
9216
|
-
var _templateObject$
|
|
9217
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9361
|
+
var _templateObject$1a;
|
|
9362
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.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);
|
|
9218
9363
|
|
|
9219
9364
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9220
9365
|
var title = _ref.title,
|
|
@@ -9240,8 +9385,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9240
9385
|
}, description))));
|
|
9241
9386
|
};
|
|
9242
9387
|
|
|
9243
|
-
var _templateObject$
|
|
9244
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9388
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9389
|
+
var stateStyles = /*#__PURE__*/styled.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) {
|
|
9245
9390
|
var theme = _ref.theme;
|
|
9246
9391
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9247
9392
|
}, function (_ref2) {
|
|
@@ -9251,12 +9396,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
|
|
|
9251
9396
|
var theme = _ref3.theme;
|
|
9252
9397
|
return theme.colors.lightgrey;
|
|
9253
9398
|
});
|
|
9254
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9399
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9255
9400
|
var theme = _ref4.theme;
|
|
9256
9401
|
return theme.colors.darkgrey;
|
|
9257
9402
|
});
|
|
9258
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9259
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9403
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9404
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9260
9405
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9261
9406
|
var theme = _ref5.theme;
|
|
9262
9407
|
return {
|
|
@@ -9264,7 +9409,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
9264
9409
|
color: theme.colors.black,
|
|
9265
9410
|
title: 'Select Arrow'
|
|
9266
9411
|
};
|
|
9267
|
-
})(_templateObject5$
|
|
9412
|
+
})(_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"])));
|
|
9268
9413
|
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9269
9414
|
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9270
9415
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -9663,9 +9808,9 @@ function Select(_ref3) {
|
|
|
9663
9808
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9664
9809
|
}
|
|
9665
9810
|
|
|
9666
|
-
var _templateObject$
|
|
9667
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9668
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9811
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$J, _templateObject4$z;
|
|
9812
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9813
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
9669
9814
|
var width = _ref.width;
|
|
9670
9815
|
if (!width) return 'none';
|
|
9671
9816
|
return width + 'px';
|
|
@@ -9682,12 +9827,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_t
|
|
|
9682
9827
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9683
9828
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9684
9829
|
});
|
|
9685
|
-
var TextLabel$
|
|
9830
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9686
9831
|
var darkMode = _ref5.darkMode;
|
|
9687
9832
|
if (darkMode) return "var(--base-color-white)";
|
|
9688
9833
|
return "var(--base-color-black)";
|
|
9689
9834
|
});
|
|
9690
|
-
var ErrorLabel$
|
|
9835
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9691
9836
|
var darkMode = _ref6.darkMode;
|
|
9692
9837
|
if (darkMode) return "var(--base-color-white)";
|
|
9693
9838
|
return "var(--base-color-errorstate)";
|
|
@@ -9704,7 +9849,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9704
9849
|
width = _ref.width,
|
|
9705
9850
|
darkMode = _ref.darkMode,
|
|
9706
9851
|
children = _ref.children;
|
|
9707
|
-
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$
|
|
9852
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9708
9853
|
darkMode: darkMode,
|
|
9709
9854
|
"data-testid": "select2-text-label"
|
|
9710
9855
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9713,7 +9858,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9713
9858
|
width: width,
|
|
9714
9859
|
error: error,
|
|
9715
9860
|
darkMode: darkMode
|
|
9716
|
-
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9861
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9717
9862
|
darkMode: darkMode,
|
|
9718
9863
|
"data-testid": "select2-error-label"
|
|
9719
9864
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9803,8 +9948,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9803
9948
|
})));
|
|
9804
9949
|
};
|
|
9805
9950
|
|
|
9806
|
-
var _templateObject$
|
|
9807
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9951
|
+
var _templateObject$1d;
|
|
9952
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.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) {
|
|
9808
9953
|
var theme = _ref.theme;
|
|
9809
9954
|
return theme.colors.primary;
|
|
9810
9955
|
});
|
|
@@ -9832,8 +9977,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9832
9977
|
})));
|
|
9833
9978
|
};
|
|
9834
9979
|
|
|
9835
|
-
var _templateObject$
|
|
9836
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9980
|
+
var _templateObject$1e, _templateObject2$S;
|
|
9981
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.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) {
|
|
9837
9982
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9838
9983
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9839
9984
|
return aspectRatio;
|
|
@@ -9843,7 +9988,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templat
|
|
|
9843
9988
|
height = _ref2.height;
|
|
9844
9989
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9845
9990
|
});
|
|
9846
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9991
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
9847
9992
|
|
|
9848
9993
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9849
9994
|
var caption = _ref.caption,
|
|
@@ -9881,13 +10026,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9881
10026
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9882
10027
|
};
|
|
9883
10028
|
|
|
9884
|
-
var _templateObject$
|
|
9885
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9886
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10029
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$K;
|
|
10030
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10031
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9887
10032
|
var displayAttribution = _ref.displayAttribution;
|
|
9888
10033
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9889
10034
|
});
|
|
9890
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10035
|
+
var Line$1 = /*#__PURE__*/styled__default.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);
|
|
9891
10036
|
|
|
9892
10037
|
var Quote = function Quote(_ref) {
|
|
9893
10038
|
var text = _ref.text,
|
|
@@ -9911,12 +10056,12 @@ var Quote = function Quote(_ref) {
|
|
|
9911
10056
|
}, attribution))));
|
|
9912
10057
|
};
|
|
9913
10058
|
|
|
9914
|
-
var _templateObject$
|
|
9915
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9916
|
-
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9917
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
9918
|
-
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
9919
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10059
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
|
|
10060
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.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"])));
|
|
10061
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10062
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10063
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10064
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.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);
|
|
9920
10065
|
var TitleWrapper$2 = /*#__PURE__*/styled__default.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);
|
|
9921
10066
|
|
|
9922
10067
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -9955,11 +10100,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9955
10100
|
}, title)))));
|
|
9956
10101
|
};
|
|
9957
10102
|
|
|
9958
|
-
var _templateObject$
|
|
9959
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9960
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9961
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
9962
|
-
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
10103
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
10104
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.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"])));
|
|
10105
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
10106
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10107
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.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"])));
|
|
9963
10108
|
|
|
9964
10109
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9965
10110
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10057,97 +10202,15 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10057
10202
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10058
10203
|
};
|
|
10059
10204
|
|
|
10060
|
-
var _templateObject$
|
|
10061
|
-
var
|
|
10062
|
-
var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
10063
|
-
var mobileOpen = _ref.mobileOpen;
|
|
10064
|
-
return mobileOpen ? "block" : 'none';
|
|
10065
|
-
}, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10066
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref2) {
|
|
10067
|
-
var active = _ref2.active;
|
|
10068
|
-
return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10069
|
-
}, exports.Colors.MidGrey, devices.mobile);
|
|
10070
|
-
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
|
|
10071
|
-
|
|
10072
|
-
/**
|
|
10073
|
-
* Vertical menu component uses for navigation
|
|
10074
|
-
* inside website chapter. It looks like a vertical
|
|
10075
|
-
* list with clickable items on desktop and dropdown
|
|
10076
|
-
* list on mobile.
|
|
10077
|
-
*
|
|
10078
|
-
* ## Menu items
|
|
10079
|
-
* Menu items should be passed as `items` prop. This
|
|
10080
|
-
* should be an array of objects. Each object should
|
|
10081
|
-
* have `text` (text displayed as a menu item) and
|
|
10082
|
-
* `onClick` (click handler function)
|
|
10083
|
-
*
|
|
10084
|
-
* ## Active menu item
|
|
10085
|
-
* Active menu item should be passed as component `activeItem`
|
|
10086
|
-
* prop. This indicates on which menu item should be highlighted
|
|
10087
|
-
* as active one. Should be equal to `text` prop from one of the `items`
|
|
10088
|
-
*/
|
|
10089
|
-
|
|
10090
|
-
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
10091
|
-
var items = _ref.items,
|
|
10092
|
-
activeItem = _ref.activeItem;
|
|
10093
|
-
|
|
10094
|
-
var _useState = React.useState(false),
|
|
10095
|
-
mobileOpen = _useState[0],
|
|
10096
|
-
setMobileOpen = _useState[1];
|
|
10097
|
-
|
|
10098
|
-
var containerRef = React.useRef(null);
|
|
10099
|
-
|
|
10100
|
-
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
10101
|
-
setMobileOpen(function (prev) {
|
|
10102
|
-
return !prev;
|
|
10103
|
-
});
|
|
10104
|
-
};
|
|
10105
|
-
|
|
10106
|
-
var outsideClickHandler = function outsideClickHandler(event) {
|
|
10107
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
10108
|
-
setMobileOpen(false);
|
|
10109
|
-
}
|
|
10110
|
-
};
|
|
10111
|
-
|
|
10112
|
-
React.useEffect(function () {
|
|
10113
|
-
document.addEventListener('mousedown', outsideClickHandler);
|
|
10114
|
-
return function () {
|
|
10115
|
-
document.removeEventListener('mousedown', outsideClickHandler);
|
|
10116
|
-
};
|
|
10117
|
-
}, [containerRef]);
|
|
10118
|
-
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
10119
|
-
ref: containerRef,
|
|
10120
|
-
"data-testid": "nav-menu-container"
|
|
10121
|
-
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
10122
|
-
mobileOpen: mobileOpen,
|
|
10123
|
-
onClick: mobileButtonClickHandler,
|
|
10124
|
-
"data-testid": "nav-menu-mobile-button"
|
|
10125
|
-
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10126
|
-
iconName: "DropdownArrow",
|
|
10127
|
-
direction: mobileOpen ? 'left' : 'right'
|
|
10128
|
-
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
10129
|
-
mobileOpen: mobileOpen,
|
|
10130
|
-
"data-testid": "nav-menu-list"
|
|
10131
|
-
}, items.map(function (item, idx) {
|
|
10132
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
10133
|
-
key: item.text + "-" + idx
|
|
10134
|
-
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
10135
|
-
onClick: item.onClick,
|
|
10136
|
-
active: item.text === activeItem,
|
|
10137
|
-
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
10138
|
-
}, item.text));
|
|
10139
|
-
})));
|
|
10140
|
-
};
|
|
10141
|
-
|
|
10142
|
-
var _templateObject$1h, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
|
|
10143
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10205
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
|
|
10206
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10144
10207
|
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10145
10208
|
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10146
10209
|
var color = _ref.color;
|
|
10147
10210
|
return "var(--base-color-" + color + ")";
|
|
10148
10211
|
});
|
|
10149
10212
|
var BottomLine = /*#__PURE__*/styled__default.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"])));
|
|
10150
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
10213
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10151
10214
|
var color = _ref2.color;
|
|
10152
10215
|
return "var(--base-color-" + color + ")";
|
|
10153
10216
|
});
|
|
@@ -10237,14 +10300,192 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
10237
10300
|
}, strengthLabel))));
|
|
10238
10301
|
};
|
|
10239
10302
|
|
|
10240
|
-
var _templateObject$
|
|
10241
|
-
var
|
|
10242
|
-
var
|
|
10243
|
-
var
|
|
10244
|
-
var
|
|
10303
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t;
|
|
10304
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10305
|
+
var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey);
|
|
10306
|
+
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10307
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
|
|
10308
|
+
var isActive = _ref.isActive;
|
|
10309
|
+
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10310
|
+
}, exports.Colors.MidGrey);
|
|
10311
|
+
var MobileMenuList = /*#__PURE__*/styled__default.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) {
|
|
10312
|
+
var isOpen = _ref2.isOpen;
|
|
10313
|
+
return isOpen ? 'block' : 'none';
|
|
10314
|
+
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
10315
|
+
|
|
10316
|
+
var NavItem = function NavItem(_ref) {
|
|
10317
|
+
var text = _ref.text,
|
|
10318
|
+
href = _ref.href,
|
|
10319
|
+
onClick = _ref.onClick,
|
|
10320
|
+
isActive = _ref.isActive,
|
|
10321
|
+
isMobile = _ref.isMobile;
|
|
10322
|
+
var linkRef = React.useRef(null);
|
|
10323
|
+
React.useEffect(function () {
|
|
10324
|
+
var handleClick = function handleClick(e) {
|
|
10325
|
+
if (onClick) onClick(e);
|
|
10326
|
+
};
|
|
10327
|
+
|
|
10328
|
+
var linkElement = linkRef.current;
|
|
10329
|
+
|
|
10330
|
+
if (linkElement) {
|
|
10331
|
+
linkElement.addEventListener('click', handleClick);
|
|
10332
|
+
}
|
|
10333
|
+
|
|
10334
|
+
return function () {
|
|
10335
|
+
if (linkElement) {
|
|
10336
|
+
linkElement.removeEventListener('click', handleClick);
|
|
10337
|
+
}
|
|
10338
|
+
};
|
|
10339
|
+
}, [onClick]);
|
|
10340
|
+
var ariaCurrent = isMobile ? undefined : isActive;
|
|
10341
|
+
var ariaSelected = isMobile ? isActive : undefined;
|
|
10342
|
+
var role = isMobile ? 'option' : undefined;
|
|
10343
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
10344
|
+
"aria-current": ariaCurrent,
|
|
10345
|
+
"aria-selected": ariaSelected,
|
|
10346
|
+
role: role
|
|
10347
|
+
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
10348
|
+
ref: linkRef,
|
|
10349
|
+
href: href,
|
|
10350
|
+
isActive: isActive,
|
|
10351
|
+
"data-testid": "nav-menu-item" + (isActive ? '-active' : '')
|
|
10352
|
+
}, text));
|
|
10353
|
+
};
|
|
10354
|
+
|
|
10355
|
+
var DesktopNav = function DesktopNav(_ref2) {
|
|
10356
|
+
var items = _ref2.items,
|
|
10357
|
+
activeItem = _ref2.activeItem,
|
|
10358
|
+
ariaLabel = _ref2.ariaLabel;
|
|
10359
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
10360
|
+
"data-testid": "nav-menu-container-desktop",
|
|
10361
|
+
"aria-label": ariaLabel
|
|
10362
|
+
}, /*#__PURE__*/React__default.createElement(MenuList, {
|
|
10363
|
+
"data-testid": "nav-menu-list"
|
|
10364
|
+
}, items.map(function (_ref3, idx) {
|
|
10365
|
+
var text = _ref3.text,
|
|
10366
|
+
href = _ref3.href,
|
|
10367
|
+
onClick = _ref3.onClick;
|
|
10368
|
+
return /*#__PURE__*/React__default.createElement(NavItem, {
|
|
10369
|
+
key: text + "-" + idx,
|
|
10370
|
+
text: text,
|
|
10371
|
+
href: href,
|
|
10372
|
+
onClick: onClick,
|
|
10373
|
+
isActive: text === activeItem
|
|
10374
|
+
});
|
|
10375
|
+
})));
|
|
10376
|
+
};
|
|
10377
|
+
|
|
10378
|
+
var MobileNav = function MobileNav(_ref4) {
|
|
10379
|
+
var items = _ref4.items,
|
|
10380
|
+
activeItem = _ref4.activeItem,
|
|
10381
|
+
ariaLabel = _ref4.ariaLabel;
|
|
10382
|
+
|
|
10383
|
+
var _useState = React.useState(false),
|
|
10384
|
+
isOpen = _useState[0],
|
|
10385
|
+
setIsOpen = _useState[1];
|
|
10386
|
+
|
|
10387
|
+
var containerRef = React.useRef(null);
|
|
10388
|
+
|
|
10389
|
+
var buttonClickHandler = function buttonClickHandler() {
|
|
10390
|
+
setIsOpen(function (prev) {
|
|
10391
|
+
return !prev;
|
|
10392
|
+
});
|
|
10393
|
+
};
|
|
10394
|
+
|
|
10395
|
+
var outsideClickHandler = function outsideClickHandler(event) {
|
|
10396
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
10397
|
+
setIsOpen(false);
|
|
10398
|
+
}
|
|
10399
|
+
};
|
|
10400
|
+
|
|
10401
|
+
React.useEffect(function () {
|
|
10402
|
+
document.addEventListener('mousedown', outsideClickHandler);
|
|
10403
|
+
return function () {
|
|
10404
|
+
document.removeEventListener('mousedown', outsideClickHandler);
|
|
10405
|
+
};
|
|
10406
|
+
}, [containerRef]);
|
|
10407
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
10408
|
+
ref: containerRef,
|
|
10409
|
+
"data-testid": "nav-menu-container-mobile",
|
|
10410
|
+
"aria-label": ariaLabel
|
|
10411
|
+
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
10412
|
+
onClick: buttonClickHandler,
|
|
10413
|
+
"data-testid": "nav-menu-mobile-button",
|
|
10414
|
+
"aria-expanded": isOpen,
|
|
10415
|
+
"aria-controls": "auxiliary-nav-list",
|
|
10416
|
+
"aria-haspopup": "listbox",
|
|
10417
|
+
role: "combobox"
|
|
10418
|
+
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10419
|
+
iconName: "DropdownArrow",
|
|
10420
|
+
direction: isOpen ? 'left' : 'right'
|
|
10421
|
+
})), /*#__PURE__*/React__default.createElement(MobileMenuList, {
|
|
10422
|
+
id: "auxiliary-nav-list",
|
|
10423
|
+
"data-testid": "nav-menu-list",
|
|
10424
|
+
isOpen: isOpen,
|
|
10425
|
+
"aria-hidden": !isOpen,
|
|
10426
|
+
role: "listbox"
|
|
10427
|
+
}, items.map(function (_ref5, idx) {
|
|
10428
|
+
var text = _ref5.text,
|
|
10429
|
+
href = _ref5.href,
|
|
10430
|
+
onClick = _ref5.onClick;
|
|
10431
|
+
return /*#__PURE__*/React__default.createElement(NavItem, {
|
|
10432
|
+
key: text + "-" + idx,
|
|
10433
|
+
text: text,
|
|
10434
|
+
href: href,
|
|
10435
|
+
onClick: onClick,
|
|
10436
|
+
isActive: text === activeItem,
|
|
10437
|
+
isMobile: true
|
|
10438
|
+
});
|
|
10439
|
+
})));
|
|
10440
|
+
};
|
|
10441
|
+
/**
|
|
10442
|
+
* Vertical menu component uses for navigation
|
|
10443
|
+
* inside website chapter. It looks like a vertical
|
|
10444
|
+
* list with clickable items on desktop and dropdown
|
|
10445
|
+
* list on mobile.
|
|
10446
|
+
*
|
|
10447
|
+
* ## Menu items
|
|
10448
|
+
* Menu items should be passed as `items` prop. This
|
|
10449
|
+
* should be an array of objects. Each object should
|
|
10450
|
+
* have `text` (text displayed as a menu item) and
|
|
10451
|
+
* `onClick` (click handler function)
|
|
10452
|
+
*
|
|
10453
|
+
* ## Active menu item
|
|
10454
|
+
* Active menu item should be passed as component `activeItem`
|
|
10455
|
+
* prop. This indicates on which menu item should be highlighted
|
|
10456
|
+
* as active one. Should be equal to `text` prop from one of the `items`
|
|
10457
|
+
*/
|
|
10458
|
+
|
|
10459
|
+
|
|
10460
|
+
var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
10461
|
+
var items = _ref6.items,
|
|
10462
|
+
activeItem = _ref6.activeItem,
|
|
10463
|
+
isMobile = _ref6.isMobile,
|
|
10464
|
+
ariaLabel = _ref6.ariaLabel;
|
|
10465
|
+
|
|
10466
|
+
if (isMobile) {
|
|
10467
|
+
return /*#__PURE__*/React__default.createElement(MobileNav, {
|
|
10468
|
+
items: items,
|
|
10469
|
+
activeItem: activeItem,
|
|
10470
|
+
ariaLabel: ariaLabel
|
|
10471
|
+
});
|
|
10472
|
+
}
|
|
10473
|
+
|
|
10474
|
+
return /*#__PURE__*/React__default.createElement(DesktopNav, {
|
|
10475
|
+
items: items,
|
|
10476
|
+
activeItem: activeItem,
|
|
10477
|
+
ariaLabel: ariaLabel
|
|
10478
|
+
});
|
|
10479
|
+
};
|
|
10480
|
+
|
|
10481
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10482
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10483
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10484
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10485
|
+
var TableHeader = /*#__PURE__*/styled__default.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) {
|
|
10245
10486
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10246
10487
|
}, devices.tablet, devices.mobile);
|
|
10247
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10488
|
+
var TableCell = /*#__PURE__*/styled__default.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) {
|
|
10248
10489
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10249
10490
|
}, devices.mobile);
|
|
10250
10491
|
var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
@@ -10522,9 +10763,9 @@ var LiveChat = function LiveChat() {
|
|
|
10522
10763
|
});
|
|
10523
10764
|
};
|
|
10524
10765
|
|
|
10525
|
-
var _templateObject$
|
|
10526
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10527
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
10766
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
10767
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.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);
|
|
10768
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(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) {
|
|
10528
10769
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10529
10770
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10530
10771
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10552,11 +10793,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10552
10793
|
}, children)));
|
|
10553
10794
|
};
|
|
10554
10795
|
|
|
10555
|
-
var _templateObject$
|
|
10556
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10557
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
10558
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10559
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
10796
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
10797
|
+
var InnerModal = /*#__PURE__*/styled__default.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);
|
|
10798
|
+
var CloseButton = /*#__PURE__*/styled__default.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);
|
|
10799
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10800
|
+
var Overlay = /*#__PURE__*/styled__default(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"])));
|
|
10560
10801
|
|
|
10561
10802
|
var MAX_Z_INDEX = 9999999999;
|
|
10562
10803
|
|
|
@@ -10676,8 +10917,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10676
10917
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
10677
10918
|
};
|
|
10678
10919
|
|
|
10679
|
-
var _templateObject$
|
|
10680
|
-
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
10920
|
+
var _templateObject$1n;
|
|
10921
|
+
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
10681
10922
|
var theme = _ref.theme;
|
|
10682
10923
|
return theme.colors.primary;
|
|
10683
10924
|
}, function (_ref2) {
|
|
@@ -11638,6 +11879,7 @@ exports.Footer = Footer;
|
|
|
11638
11879
|
exports.GlobalStyles = GlobalStyles;
|
|
11639
11880
|
exports.Grid = Grid;
|
|
11640
11881
|
exports.GridItem = GridItem;
|
|
11882
|
+
exports.GridItemLegacy = GridItemLegacy;
|
|
11641
11883
|
exports.Header = Header;
|
|
11642
11884
|
exports.Icon = Icon;
|
|
11643
11885
|
exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
|
|
@@ -11689,6 +11931,7 @@ exports.Tabs = Tabs;
|
|
|
11689
11931
|
exports.TertiaryButton = Button$1;
|
|
11690
11932
|
exports.TextArea = TextArea;
|
|
11691
11933
|
exports.TextField = TextField;
|
|
11934
|
+
exports.TextFieldLegacy = TextFieldLegacy;
|
|
11692
11935
|
exports.TextLink = TextLink;
|
|
11693
11936
|
exports.TextOnly = TextOnly;
|
|
11694
11937
|
exports.ThemeProvider = Theme;
|