@royaloperahouse/chord 2.3.1 → 2.3.2-a-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 +640 -448
- 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 +640 -450
- 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/Typography/Typography.d.ts +1 -1
- package/dist/components/atoms/index.d.ts +3 -3
- package/dist/components/index.d.ts +2 -2
- 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/SectionTitle/SectionTitle.d.ts +1 -1
- package/dist/components/molecules/index.d.ts +1 -1
- package/dist/helpers/generateDomElementId.d.ts +8 -0
- package/dist/index.d.ts +3 -2
- package/dist/types/auxiliaryNav.d.ts +8 -8
- package/dist/types/editorial.d.ts +18 -2
- package/dist/types/formTypes.d.ts +12 -9
- package/dist/types/impactHeader.d.ts +13 -0
- package/dist/types/types.d.ts +6 -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) {
|
|
@@ -2789,9 +2821,10 @@ var StyledTag = function StyledTag(_ref) {
|
|
|
2789
2821
|
}, children);
|
|
2790
2822
|
};
|
|
2791
2823
|
var AltHeader = function AltHeader(_ref2) {
|
|
2792
|
-
var
|
|
2824
|
+
var semanticLevel = _ref2.semanticLevel,
|
|
2825
|
+
level = _ref2.level,
|
|
2793
2826
|
children = _ref2.children;
|
|
2794
|
-
var renderedTag = "h" + level;
|
|
2827
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2795
2828
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2796
2829
|
tag: renderedTag,
|
|
2797
2830
|
typography: "altHeader",
|
|
@@ -2889,8 +2922,8 @@ var Radio = function Radio(_ref) {
|
|
|
2889
2922
|
}, error)));
|
|
2890
2923
|
};
|
|
2891
2924
|
|
|
2892
|
-
var _templateObject$
|
|
2893
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$
|
|
2925
|
+
var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
2926
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2894
2927
|
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
2928
|
var error = _ref.error,
|
|
2896
2929
|
darkMode = _ref.darkMode,
|
|
@@ -2998,8 +3031,8 @@ var Radio2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2998
3031
|
}, error)));
|
|
2999
3032
|
});
|
|
3000
3033
|
|
|
3001
|
-
var _templateObject$
|
|
3002
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3034
|
+
var _templateObject$h, _templateObject2$6, _templateObject3$5;
|
|
3035
|
+
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
3036
|
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
3037
|
var theme = _ref.theme;
|
|
3005
3038
|
return theme.colors.primary;
|
|
@@ -3070,8 +3103,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3070
3103
|
}, renderNextIcon()));
|
|
3071
3104
|
};
|
|
3072
3105
|
|
|
3073
|
-
var _templateObject$
|
|
3074
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3106
|
+
var _templateObject$i;
|
|
3107
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3075
3108
|
var fillColor = _ref.fillColor;
|
|
3076
3109
|
return fillColor;
|
|
3077
3110
|
});
|
|
@@ -3095,8 +3128,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3095
3128
|
})));
|
|
3096
3129
|
};
|
|
3097
3130
|
|
|
3098
|
-
var _templateObject$
|
|
3099
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3131
|
+
var _templateObject$j, _templateObject2$7;
|
|
3132
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3100
3133
|
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
3134
|
|
|
3102
3135
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3115,8 +3148,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3115
3148
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3116
3149
|
};
|
|
3117
3150
|
|
|
3118
|
-
var _templateObject$
|
|
3119
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3151
|
+
var _templateObject$k;
|
|
3152
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3120
3153
|
|
|
3121
3154
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3122
3155
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3326,8 +3359,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3326
3359
|
})))));
|
|
3327
3360
|
};
|
|
3328
3361
|
|
|
3329
|
-
var _templateObject$
|
|
3330
|
-
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$
|
|
3362
|
+
var _templateObject$l, _templateObject2$8;
|
|
3363
|
+
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
3364
|
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
3365
|
|
|
3333
3366
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3360,8 +3393,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3360
3393
|
}));
|
|
3361
3394
|
};
|
|
3362
3395
|
|
|
3363
|
-
var _templateObject$
|
|
3364
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3396
|
+
var _templateObject$m, _templateObject2$9;
|
|
3397
|
+
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
3398
|
if (props.withIcon === 'left') {
|
|
3366
3399
|
return "margin-left: 5px;";
|
|
3367
3400
|
}
|
|
@@ -3460,8 +3493,8 @@ var Tab = function Tab(_ref) {
|
|
|
3460
3493
|
}));
|
|
3461
3494
|
};
|
|
3462
3495
|
|
|
3463
|
-
var _templateObject$
|
|
3464
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3496
|
+
var _templateObject$n, _templateObject2$a;
|
|
3497
|
+
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
3498
|
var iconName = _ref.iconName;
|
|
3466
3499
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3467
3500
|
}, function (_ref2) {
|
|
@@ -3512,8 +3545,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3512
3545
|
})) : null, children);
|
|
3513
3546
|
};
|
|
3514
3547
|
|
|
3515
|
-
var _templateObject$
|
|
3516
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3548
|
+
var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3549
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3517
3550
|
var width = _ref.width;
|
|
3518
3551
|
return width ? width + "px;" : '100%;';
|
|
3519
3552
|
}, function (_ref2) {
|
|
@@ -3636,8 +3669,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
3636
3669
|
}, error))));
|
|
3637
3670
|
};
|
|
3638
3671
|
|
|
3639
|
-
var _templateObject$
|
|
3640
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3672
|
+
var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3673
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3641
3674
|
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
3675
|
var width = _ref.width;
|
|
3643
3676
|
if (!width) return 'none';
|
|
@@ -3763,15 +3796,87 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3763
3796
|
}, error)));
|
|
3764
3797
|
});
|
|
3765
3798
|
|
|
3766
|
-
var _templateObject$
|
|
3767
|
-
var
|
|
3799
|
+
var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
3800
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3801
|
+
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) {
|
|
3802
|
+
var theme = _ref.theme;
|
|
3803
|
+
return theme.fonts.desktop.weights.body[1];
|
|
3804
|
+
}, function (_ref2) {
|
|
3805
|
+
var theme = _ref2.theme;
|
|
3806
|
+
return theme.fonts.desktop.sizes.altHeaders[6];
|
|
3807
|
+
}, function (_ref3) {
|
|
3808
|
+
var theme = _ref3.theme;
|
|
3809
|
+
return theme.spacing[7];
|
|
3810
|
+
});
|
|
3811
|
+
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) {
|
|
3812
|
+
var width = _ref4.width;
|
|
3813
|
+
return width ? width + 'px' : '196px';
|
|
3814
|
+
}, function (_ref5) {
|
|
3815
|
+
var theme = _ref5.theme;
|
|
3816
|
+
return theme.colors.darkgrey;
|
|
3817
|
+
}, function (_ref6) {
|
|
3818
|
+
var error = _ref6.error,
|
|
3819
|
+
theme = _ref6.theme;
|
|
3820
|
+
if (!error) return;
|
|
3821
|
+
return "\n border: 1px solid " + theme.colors.error + ";\n ";
|
|
3822
|
+
}, function (_ref7) {
|
|
3823
|
+
var theme = _ref7.theme;
|
|
3824
|
+
return theme.colors.lightgrey;
|
|
3825
|
+
}, function (_ref8) {
|
|
3826
|
+
var darkMode = _ref8.darkMode,
|
|
3827
|
+
theme = _ref8.theme;
|
|
3828
|
+
if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
|
|
3829
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
3830
|
+
});
|
|
3831
|
+
var TextLabel$2 = /*#__PURE__*/styled__default.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
|
|
3832
|
+
var darkMode = _ref9.darkMode,
|
|
3833
|
+
theme = _ref9.theme;
|
|
3834
|
+
return darkMode ? theme.colors.white : theme.colors.black;
|
|
3835
|
+
});
|
|
3836
|
+
var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
|
|
3837
|
+
var darkMode = _ref10.darkMode,
|
|
3838
|
+
theme = _ref10.theme;
|
|
3839
|
+
return darkMode ? theme.colors.white : theme.colors.error;
|
|
3840
|
+
});
|
|
3841
|
+
|
|
3842
|
+
/**
|
|
3843
|
+
* # IMPORTANT
|
|
3844
|
+
* Please use the `<TextField />` component instead of this component if possible.
|
|
3845
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3846
|
+
* */
|
|
3847
|
+
|
|
3848
|
+
var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
3849
|
+
var label = _ref.label,
|
|
3850
|
+
error = _ref.error,
|
|
3851
|
+
_ref$darkMode = _ref.darkMode,
|
|
3852
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3853
|
+
width = _ref.width,
|
|
3854
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
|
|
3855
|
+
|
|
3856
|
+
return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3857
|
+
darkMode: darkMode,
|
|
3858
|
+
"data-testid": "text-field-text-label"
|
|
3859
|
+
}, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
|
|
3860
|
+
type: "text",
|
|
3861
|
+
error: error,
|
|
3862
|
+
darkMode: darkMode,
|
|
3863
|
+
"data-testid": "text-field-input",
|
|
3864
|
+
width: width
|
|
3865
|
+
}, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3866
|
+
darkMode: darkMode,
|
|
3867
|
+
"data-testid": "text-field-error-label"
|
|
3868
|
+
}, error) : null);
|
|
3869
|
+
};
|
|
3870
|
+
|
|
3871
|
+
var _templateObject$r, _templateObject2$e;
|
|
3872
|
+
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
3873
|
var iconName = _ref.iconName;
|
|
3769
3874
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3770
3875
|
}, function (_ref2) {
|
|
3771
3876
|
var color = _ref2.color;
|
|
3772
3877
|
return color;
|
|
3773
3878
|
});
|
|
3774
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
3879
|
+
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
3880
|
|
|
3776
3881
|
var TextLink = function TextLink(_ref) {
|
|
3777
3882
|
var children = _ref.children,
|
|
@@ -3793,20 +3898,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3793
3898
|
})) : null);
|
|
3794
3899
|
};
|
|
3795
3900
|
|
|
3796
|
-
var _templateObject$
|
|
3797
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3901
|
+
var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3902
|
+
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
3903
|
var fontSize = _ref.fontSize;
|
|
3799
3904
|
return fontSize + 'px';
|
|
3800
3905
|
}, function (_ref2) {
|
|
3801
3906
|
var color = _ref2.color;
|
|
3802
3907
|
return color;
|
|
3803
3908
|
});
|
|
3804
|
-
var LogoRightSide = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
3805
|
-
var LogoLeftSide = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
3909
|
+
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"])));
|
|
3910
|
+
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
3911
|
var color = _ref3.color;
|
|
3807
3912
|
return color;
|
|
3808
3913
|
});
|
|
3809
|
-
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3914
|
+
var LogoLeftSideRow = /*#__PURE__*/styled__default.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3810
3915
|
|
|
3811
3916
|
var TextLogoProduct;
|
|
3812
3917
|
|
|
@@ -3828,12 +3933,12 @@ var Logo = function Logo(_ref) {
|
|
|
3828
3933
|
}, /*#__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
3934
|
};
|
|
3830
3935
|
|
|
3831
|
-
var _templateObject$
|
|
3832
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3936
|
+
var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7;
|
|
3937
|
+
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
3938
|
var dark = _ref.dark;
|
|
3834
3939
|
return dark ? 'white' : 'errorstate';
|
|
3835
3940
|
});
|
|
3836
|
-
var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$
|
|
3941
|
+
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
3942
|
var dark = _ref2.dark,
|
|
3838
3943
|
disabled = _ref2.disabled;
|
|
3839
3944
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3842,7 +3947,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled__default.label(_templateObject2$f || (_
|
|
|
3842
3947
|
var disabled = _ref3.disabled;
|
|
3843
3948
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3844
3949
|
}, devices.mobileAndTablet);
|
|
3845
|
-
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$
|
|
3950
|
+
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
3951
|
var dark = _ref4.dark,
|
|
3847
3952
|
disabled = _ref4.disabled,
|
|
3848
3953
|
error = _ref4.error;
|
|
@@ -3858,7 +3963,7 @@ var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject3$9 || (
|
|
|
3858
3963
|
dark = _ref6.dark;
|
|
3859
3964
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3860
3965
|
}, devices.mobile);
|
|
3861
|
-
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
3966
|
+
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
3967
|
var dark = _ref7.dark,
|
|
3863
3968
|
whiteBox = _ref7.whiteBox,
|
|
3864
3969
|
disabled = _ref7.disabled;
|
|
@@ -3950,9 +4055,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3950
4055
|
}, error)));
|
|
3951
4056
|
};
|
|
3952
4057
|
|
|
3953
|
-
var _templateObject$
|
|
3954
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3955
|
-
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4058
|
+
var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
|
|
4059
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4060
|
+
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
4061
|
var error = _ref.error,
|
|
3957
4062
|
darkMode = _ref.darkMode,
|
|
3958
4063
|
disabled = _ref.disabled;
|
|
@@ -3975,7 +4080,7 @@ var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templat
|
|
|
3975
4080
|
if (blackBox) return 'var(--base-color-white)';
|
|
3976
4081
|
return ' var(--base-color-black)';
|
|
3977
4082
|
});
|
|
3978
|
-
var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$
|
|
4083
|
+
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
4084
|
var blackBox = _ref4.blackBox,
|
|
3980
4085
|
darkMode = _ref4.darkMode;
|
|
3981
4086
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -3986,8 +4091,8 @@ var TickboxLabel$2 = /*#__PURE__*/styled__default.label(_templateObject3$a || (_
|
|
|
3986
4091
|
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3987
4092
|
return '3px solid var(--base-color-lapislazuli)';
|
|
3988
4093
|
});
|
|
3989
|
-
var TickboxIcon = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
3990
|
-
var TextLabel$
|
|
4094
|
+
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);
|
|
4095
|
+
var TextLabel$3 = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3991
4096
|
var darkMode = _ref6.darkMode,
|
|
3992
4097
|
disabled = _ref6.disabled;
|
|
3993
4098
|
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
@@ -3995,7 +4100,7 @@ var TextLabel$2 = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templ
|
|
|
3995
4100
|
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3996
4101
|
return 'var(--base-color-black)';
|
|
3997
4102
|
});
|
|
3998
|
-
var ErrorLabel$
|
|
4103
|
+
var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
3999
4104
|
var darkMode = _ref7.darkMode;
|
|
4000
4105
|
if (darkMode) return 'var(--base-color-white)';
|
|
4001
4106
|
return 'var(--base-color-errorstate)';
|
|
@@ -4047,13 +4152,13 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4047
4152
|
blackBox: blackBox
|
|
4048
4153
|
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4049
4154
|
iconName: "Tick"
|
|
4050
|
-
}))), /*#__PURE__*/React__default.createElement(TextLabel$
|
|
4155
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
4051
4156
|
disabled: disabled,
|
|
4052
4157
|
darkMode: darkMode,
|
|
4053
4158
|
"data-testid": "tickbox-content"
|
|
4054
4159
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4055
4160
|
level: 1
|
|
4056
|
-
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
4161
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
4057
4162
|
darkMode: darkMode,
|
|
4058
4163
|
"data-testid": "tickbox-error-label"
|
|
4059
4164
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -4061,18 +4166,18 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4061
4166
|
}, error)));
|
|
4062
4167
|
});
|
|
4063
4168
|
|
|
4064
|
-
var _templateObject$
|
|
4065
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4169
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4170
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4066
4171
|
var color = _ref.color;
|
|
4067
4172
|
return color;
|
|
4068
4173
|
});
|
|
4069
|
-
var Line = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
4174
|
+
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
4175
|
var color = _ref2.color;
|
|
4071
4176
|
return color;
|
|
4072
4177
|
}, 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$
|
|
4178
|
+
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);
|
|
4179
|
+
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);
|
|
4180
|
+
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
4181
|
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
4182
|
var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4078
4183
|
var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -4170,8 +4275,8 @@ var Timer = function Timer(_ref) {
|
|
|
4170
4275
|
}));
|
|
4171
4276
|
};
|
|
4172
4277
|
|
|
4173
|
-
var _templateObject$
|
|
4174
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4278
|
+
var _templateObject$w;
|
|
4279
|
+
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
4280
|
|
|
4176
4281
|
var TypeTags = function TypeTags(_ref) {
|
|
4177
4282
|
var list = _ref.list;
|
|
@@ -4913,12 +5018,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
4913
5018
|
}
|
|
4914
5019
|
});
|
|
4915
5020
|
|
|
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$
|
|
5021
|
+
var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5022
|
+
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"])));
|
|
5023
|
+
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"])));
|
|
5024
|
+
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5025
|
+
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"])));
|
|
5026
|
+
var LeftWrapper = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4922
5027
|
var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4923
5028
|
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
5029
|
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"])));
|
|
@@ -4987,6 +5092,16 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4987
5092
|
video.loop = loop;
|
|
4988
5093
|
}
|
|
4989
5094
|
}, [loop]);
|
|
5095
|
+
React.useEffect(function () {
|
|
5096
|
+
var handleFullscreenChange = function handleFullscreenChange() {
|
|
5097
|
+
setIsFullscreen(!!document.fullscreenElement);
|
|
5098
|
+
};
|
|
5099
|
+
|
|
5100
|
+
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
5101
|
+
return function () {
|
|
5102
|
+
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
5103
|
+
};
|
|
5104
|
+
}, []);
|
|
4990
5105
|
var handleFullscreen = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
|
|
4991
5106
|
var videoContainer;
|
|
4992
5107
|
return runtime_1.wrap(function _callee$(_context) {
|
|
@@ -5121,13 +5236,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5121
5236
|
})));
|
|
5122
5237
|
};
|
|
5123
5238
|
|
|
5124
|
-
var _templateObject$
|
|
5125
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5126
|
-
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5239
|
+
var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
|
|
5240
|
+
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"])));
|
|
5241
|
+
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
5242
|
var darkMode = _ref.darkMode;
|
|
5128
5243
|
return darkMode ? 'white' : 'errorstate';
|
|
5129
5244
|
});
|
|
5130
|
-
var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5245
|
+
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
5246
|
var darkMode = _ref2.darkMode,
|
|
5132
5247
|
disabled = _ref2.disabled,
|
|
5133
5248
|
error = _ref2.error;
|
|
@@ -5149,11 +5264,11 @@ var StepperBox = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templa
|
|
|
5149
5264
|
var disabled = _ref6.disabled;
|
|
5150
5265
|
return disabled ? 'midgrey' : 'black';
|
|
5151
5266
|
});
|
|
5152
|
-
var StepperValue = /*#__PURE__*/styled__default.input(_templateObject4$
|
|
5267
|
+
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
5268
|
var disabled = _ref7.disabled;
|
|
5154
5269
|
return disabled ? 'not-allowed' : 'text';
|
|
5155
5270
|
});
|
|
5156
|
-
var StepperButton = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
5271
|
+
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
5272
|
var disabled = _ref8.disabled;
|
|
5158
5273
|
return disabled ? 'not-allowed' : 'pointer';
|
|
5159
5274
|
});
|
|
@@ -5349,18 +5464,18 @@ var Component = function Component(_ref) {
|
|
|
5349
5464
|
}, error)));
|
|
5350
5465
|
};
|
|
5351
5466
|
|
|
5352
|
-
var _templateObject$
|
|
5353
|
-
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5467
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5468
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5354
5469
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5355
5470
|
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
5471
|
});
|
|
5357
|
-
var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5358
|
-
var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$
|
|
5359
|
-
var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
5472
|
+
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);
|
|
5473
|
+
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);
|
|
5474
|
+
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
5475
|
var visible = _ref2.visible;
|
|
5361
5476
|
return visible ? 'visible' : 'hidden';
|
|
5362
5477
|
}, zIndexes.search, devices.mobile);
|
|
5363
|
-
var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$
|
|
5478
|
+
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
5479
|
var visible = _ref3.visible;
|
|
5365
5480
|
return visible ? 'visible' : 'hidden';
|
|
5366
5481
|
}, zIndexes.search, devices.mobile);
|
|
@@ -5374,8 +5489,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_temp
|
|
|
5374
5489
|
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
5490
|
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
5491
|
|
|
5377
|
-
var _templateObject$
|
|
5378
|
-
var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5492
|
+
var _templateObject$A;
|
|
5493
|
+
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
5494
|
|
|
5380
5495
|
var Logo$1 = function Logo(_ref) {
|
|
5381
5496
|
var _ref$id = _ref.id,
|
|
@@ -5404,11 +5519,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
5404
5519
|
}))));
|
|
5405
5520
|
};
|
|
5406
5521
|
|
|
5407
|
-
var _templateObject$
|
|
5408
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5522
|
+
var _templateObject$B;
|
|
5523
|
+
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
5524
|
|
|
5410
|
-
var _templateObject$
|
|
5411
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5525
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$g, _templateObject4$d;
|
|
5526
|
+
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
5527
|
var selected = _ref.selected,
|
|
5413
5528
|
colorPrimary = _ref.colorPrimary;
|
|
5414
5529
|
|
|
@@ -5436,9 +5551,9 @@ var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
|
|
|
5436
5551
|
|
|
5437
5552
|
return '';
|
|
5438
5553
|
});
|
|
5439
|
-
var SvgContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5440
|
-
var NumContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
5441
|
-
var BasketText = /*#__PURE__*/styled__default.a(_templateObject4$
|
|
5554
|
+
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"])));
|
|
5555
|
+
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"])));
|
|
5556
|
+
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
5557
|
|
|
5443
5558
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
5444
5559
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -5596,8 +5711,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5596
5711
|
}, expiryTime ? basketText : text) : ''));
|
|
5597
5712
|
};
|
|
5598
5713
|
|
|
5599
|
-
var _templateObject$
|
|
5600
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5714
|
+
var _templateObject$D, _templateObject2$n;
|
|
5715
|
+
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
5716
|
var selected = _ref.selected,
|
|
5602
5717
|
colorPrimary = _ref.colorPrimary;
|
|
5603
5718
|
|
|
@@ -5613,7 +5728,7 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_te
|
|
|
5613
5728
|
var colorPrimary = _ref3.colorPrimary;
|
|
5614
5729
|
return colorPrimary;
|
|
5615
5730
|
});
|
|
5616
|
-
var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
5731
|
+
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
5732
|
|
|
5618
5733
|
var Search$1 = function Search(_ref) {
|
|
5619
5734
|
var _ref$selected = _ref.selected,
|
|
@@ -5889,23 +6004,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
5889
6004
|
}));
|
|
5890
6005
|
};
|
|
5891
6006
|
|
|
5892
|
-
var _templateObject$
|
|
5893
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5894
|
-
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6007
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$e;
|
|
6008
|
+
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"])));
|
|
6009
|
+
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
6010
|
if (props.showMenu) {
|
|
5896
6011
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5897
6012
|
}
|
|
5898
6013
|
|
|
5899
6014
|
return "display: none;";
|
|
5900
6015
|
});
|
|
5901
|
-
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6016
|
+
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
6017
|
var colorPrimary = _ref.colorPrimary;
|
|
5903
6018
|
return colorPrimary;
|
|
5904
6019
|
}, function (_ref2) {
|
|
5905
6020
|
var colorPrimary = _ref2.colorPrimary;
|
|
5906
6021
|
return colorPrimary;
|
|
5907
6022
|
}, devices.mobileAndTablet);
|
|
5908
|
-
var MenuItem = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6023
|
+
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
6024
|
|
|
5910
6025
|
var Tabs = function Tabs(_ref) {
|
|
5911
6026
|
var _ref$items = _ref.items,
|
|
@@ -6032,11 +6147,11 @@ var Tabs = function Tabs(_ref) {
|
|
|
6032
6147
|
}, "MENU"))));
|
|
6033
6148
|
};
|
|
6034
6149
|
|
|
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$
|
|
6150
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6151
|
+
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);
|
|
6152
|
+
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"])));
|
|
6153
|
+
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"])));
|
|
6154
|
+
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
6155
|
var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6041
6156
|
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
6157
|
|
|
@@ -6270,18 +6385,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
6270
6385
|
})))));
|
|
6271
6386
|
};
|
|
6272
6387
|
|
|
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$
|
|
6388
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
|
|
6389
|
+
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"])));
|
|
6390
|
+
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"])));
|
|
6391
|
+
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);
|
|
6392
|
+
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);
|
|
6393
|
+
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
6394
|
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
6395
|
|
|
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$
|
|
6396
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$k;
|
|
6397
|
+
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);
|
|
6398
|
+
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);
|
|
6399
|
+
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
6400
|
|
|
6286
6401
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6287
6402
|
var _ref$items = _ref.items,
|
|
@@ -6297,12 +6412,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6297
6412
|
}));
|
|
6298
6413
|
};
|
|
6299
6414
|
|
|
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$
|
|
6415
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6416
|
+
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);
|
|
6417
|
+
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);
|
|
6418
|
+
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);
|
|
6419
|
+
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);
|
|
6420
|
+
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
6421
|
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
6422
|
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
6423
|
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 +6484,15 @@ var Footer = function Footer(_ref) {
|
|
|
6369
6484
|
}, additionalInfo)))));
|
|
6370
6485
|
};
|
|
6371
6486
|
|
|
6372
|
-
var _templateObject$
|
|
6487
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
|
|
6373
6488
|
var LIST_ITEM_GAP = 32;
|
|
6374
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6489
|
+
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
6490
|
var bottomBorder = _ref.bottomBorder;
|
|
6376
6491
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6377
6492
|
}, 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$
|
|
6493
|
+
var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6494
|
+
var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6495
|
+
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
6496
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
6382
6497
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6383
6498
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -6388,7 +6503,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject4$g || (_templateO
|
|
|
6388
6503
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6389
6504
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6390
6505
|
});
|
|
6391
|
-
var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6506
|
+
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
6507
|
var fullWidth = _ref5.fullWidth;
|
|
6393
6508
|
return fullWidth ? '74px' : '46px';
|
|
6394
6509
|
});
|
|
@@ -6635,17 +6750,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6635
6750
|
})) : null) : null))));
|
|
6636
6751
|
};
|
|
6637
6752
|
|
|
6638
|
-
var _templateObject$
|
|
6639
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6753
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6754
|
+
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
6755
|
var sticky = _ref.sticky;
|
|
6641
6756
|
return sticky ? 'sticky' : 'initial';
|
|
6642
6757
|
}, zIndexes.anchor);
|
|
6643
|
-
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
6644
|
-
var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6758
|
+
var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6759
|
+
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
6760
|
var title = _ref2.title;
|
|
6646
6761
|
return title ? 'row' : 'row-reverse';
|
|
6647
6762
|
}, devices.tablet, devices.mobile);
|
|
6648
|
-
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6763
|
+
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
6764
|
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
6765
|
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
6766
|
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 +6811,15 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6696
6811
|
}, message)));
|
|
6697
6812
|
};
|
|
6698
6813
|
|
|
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$
|
|
6814
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6815
|
+
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);
|
|
6816
|
+
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"])));
|
|
6817
|
+
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
6818
|
var theme = _ref.theme;
|
|
6704
6819
|
return theme.colors.primary;
|
|
6705
6820
|
}, exports.Colors.White);
|
|
6706
|
-
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
6707
|
-
var TitleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
6821
|
+
var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6822
|
+
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
6823
|
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
6824
|
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
6825
|
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 +6892,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
6777
6892
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
6778
6893
|
};
|
|
6779
6894
|
|
|
6780
|
-
var _templateObject$
|
|
6781
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6895
|
+
var _templateObject$M;
|
|
6896
|
+
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
6897
|
|
|
6783
6898
|
var UpsellCards = function UpsellCards(_ref) {
|
|
6784
6899
|
var upsellCards = _ref.upsellCards;
|
|
@@ -6796,20 +6911,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
6796
6911
|
}));
|
|
6797
6912
|
};
|
|
6798
6913
|
|
|
6799
|
-
var _templateObject$
|
|
6800
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6914
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$p;
|
|
6915
|
+
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
6916
|
var theme = _ref.theme;
|
|
6802
6917
|
return theme.colors.primary;
|
|
6803
6918
|
}, devices.mobile, devices.tablet);
|
|
6804
|
-
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6805
|
-
var TextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
6919
|
+
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);
|
|
6920
|
+
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
6921
|
|
|
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$
|
|
6922
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
|
|
6923
|
+
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"])));
|
|
6924
|
+
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"])));
|
|
6925
|
+
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);
|
|
6926
|
+
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);
|
|
6927
|
+
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
6928
|
|
|
6814
6929
|
var Accordion = function Accordion(_ref) {
|
|
6815
6930
|
var _ref$title = _ref.title,
|
|
@@ -6934,8 +7049,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6934
7049
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6935
7050
|
};
|
|
6936
7051
|
|
|
6937
|
-
var _templateObject$
|
|
6938
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7052
|
+
var _templateObject$P;
|
|
7053
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6939
7054
|
|
|
6940
7055
|
var Accordions = function Accordions(_ref) {
|
|
6941
7056
|
var _ref$items = _ref.items,
|
|
@@ -6953,7 +7068,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6953
7068
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6954
7069
|
contentType: accordion.contentType,
|
|
6955
7070
|
displayLevel: accordion.displayLevel,
|
|
6956
|
-
semanticLevel: accordion.semanticLevel
|
|
7071
|
+
semanticLevel: accordion.semanticLevel,
|
|
7072
|
+
initOpen: accordion.initOpen
|
|
6957
7073
|
}, accordion.children);
|
|
6958
7074
|
}));
|
|
6959
7075
|
};
|
|
@@ -6967,13 +7083,13 @@ var Theme = function Theme(_ref) {
|
|
|
6967
7083
|
}, children);
|
|
6968
7084
|
};
|
|
6969
7085
|
|
|
6970
|
-
var _templateObject$
|
|
6971
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7086
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r;
|
|
7087
|
+
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
7088
|
var theme = _ref.theme;
|
|
6973
7089
|
return theme.colors.primary;
|
|
6974
7090
|
}, devices.mobile);
|
|
6975
|
-
var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
6976
|
-
var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7091
|
+
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);
|
|
7092
|
+
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
7093
|
|
|
6978
7094
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
6979
7095
|
var title = _ref.title,
|
|
@@ -7010,8 +7126,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7010
7126
|
}))))));
|
|
7011
7127
|
};
|
|
7012
7128
|
|
|
7013
|
-
var _templateObject$
|
|
7014
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
7129
|
+
var _templateObject$R;
|
|
7130
|
+
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
7131
|
var bgColor = _ref.bgColor,
|
|
7016
7132
|
theme = _ref.theme;
|
|
7017
7133
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7032,32 +7148,32 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7032
7148
|
}), children);
|
|
7033
7149
|
};
|
|
7034
7150
|
|
|
7035
|
-
var _templateObject$
|
|
7151
|
+
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
7152
|
var LENGTH_LARGE_TEXT = 28;
|
|
7037
7153
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7038
7154
|
var LENGTH_TEXT_TABLET = 10;
|
|
7039
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7155
|
+
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
7156
|
var isCardClickable = _ref.isCardClickable;
|
|
7041
7157
|
return isCardClickable ? 'pointer' : 'default';
|
|
7042
7158
|
}, function (_ref2) {
|
|
7043
7159
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7044
7160
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7045
7161
|
});
|
|
7046
|
-
var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7162
|
+
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
7163
|
var lineColor = _ref3.lineColor,
|
|
7048
7164
|
theme = _ref3.theme;
|
|
7049
7165
|
if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
|
|
7050
7166
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7051
7167
|
}, zIndexes.contentOverlay);
|
|
7052
|
-
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7053
|
-
var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7168
|
+
var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7169
|
+
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
7170
|
var fullWidth = _ref4.fullWidth;
|
|
7055
7171
|
return fullWidth ? '0' : '20px';
|
|
7056
7172
|
}, function (_ref5) {
|
|
7057
7173
|
var fullWidth = _ref5.fullWidth;
|
|
7058
7174
|
return fullWidth ? '0' : '20px';
|
|
7059
7175
|
});
|
|
7060
|
-
var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7176
|
+
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
7177
|
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
7178
|
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
7179
|
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 +7434,9 @@ var Card = function Card(_ref) {
|
|
|
7318
7434
|
dangerouslySetInnerHTML: {
|
|
7319
7435
|
__html: truncatedText
|
|
7320
7436
|
}
|
|
7321
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7437
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7322
7438
|
level: 1
|
|
7323
|
-
}, highlightText))
|
|
7439
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7324
7440
|
fullWidth: fullWidth
|
|
7325
7441
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7326
7442
|
ref: node,
|
|
@@ -7334,9 +7450,9 @@ var Card = function Card(_ref) {
|
|
|
7334
7450
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7335
7451
|
};
|
|
7336
7452
|
|
|
7337
|
-
var _templateObject$
|
|
7338
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7339
|
-
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$
|
|
7453
|
+
var _templateObject$T, _templateObject2$A;
|
|
7454
|
+
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);
|
|
7455
|
+
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
7456
|
|
|
7341
7457
|
var Cards = function Cards(_ref) {
|
|
7342
7458
|
var cards = _ref.cards,
|
|
@@ -7381,18 +7497,18 @@ var Cards = function Cards(_ref) {
|
|
|
7381
7497
|
}));
|
|
7382
7498
|
};
|
|
7383
7499
|
|
|
7384
|
-
var _templateObject$
|
|
7385
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7386
|
-
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7500
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
|
|
7501
|
+
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);
|
|
7502
|
+
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
7503
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7388
7504
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7389
7505
|
}, function (_ref2) {
|
|
7390
7506
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7391
7507
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7392
7508
|
}, 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$
|
|
7509
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7510
|
+
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);
|
|
7511
|
+
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
7512
|
|
|
7397
7513
|
var divideAddressString = function divideAddressString(address) {
|
|
7398
7514
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7450,16 +7566,16 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7450
7566
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7451
7567
|
};
|
|
7452
7568
|
|
|
7453
|
-
var _templateObject$
|
|
7454
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
7455
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$
|
|
7569
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
|
|
7570
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7571
|
+
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
7572
|
return props.clickable ? 'pointer' : 'default';
|
|
7457
7573
|
}, devices.mobile);
|
|
7458
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7459
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7574
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7575
|
+
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
7576
|
return props.showImage ? 2 : '1 / span 4';
|
|
7461
7577
|
}, devices.mobile);
|
|
7462
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7578
|
+
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
7579
|
var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7464
7580
|
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
7581
|
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 +7649,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7533
7649
|
}), link.text)));
|
|
7534
7650
|
};
|
|
7535
7651
|
|
|
7536
|
-
var _templateObject$
|
|
7537
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7652
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
|
|
7653
|
+
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
7654
|
var imageToLeft = _ref.imageToLeft;
|
|
7539
7655
|
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
7656
|
}, devices.mobile);
|
|
7541
|
-
var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7657
|
+
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
7658
|
var imageToLeft = _ref2.imageToLeft;
|
|
7543
7659
|
return imageToLeft ? 'left' : 'right';
|
|
7544
7660
|
}, devices.mobile);
|
|
7545
|
-
var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7661
|
+
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
7662
|
var imageToLeft = _ref3.imageToLeft;
|
|
7547
7663
|
return imageToLeft ? 'right' : 'left';
|
|
7548
7664
|
}, devices.mobile);
|
|
7549
|
-
var EditorialSubtitle = /*#__PURE__*/styled__default.span(_templateObject4$
|
|
7550
|
-
var EditorialText = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7665
|
+
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"])));
|
|
7666
|
+
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
7667
|
|
|
7552
7668
|
var Editorial = function Editorial(_ref) {
|
|
7553
7669
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7611,10 +7727,10 @@ var BackgroundColour;
|
|
|
7611
7727
|
BackgroundColour["White"] = "white";
|
|
7612
7728
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
7613
7729
|
|
|
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$
|
|
7730
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p;
|
|
7731
|
+
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"])));
|
|
7732
|
+
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7733
|
+
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7618
7734
|
if (!props.infoThemed) {
|
|
7619
7735
|
return;
|
|
7620
7736
|
} else {
|
|
@@ -7625,7 +7741,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (
|
|
|
7625
7741
|
}
|
|
7626
7742
|
}
|
|
7627
7743
|
});
|
|
7628
|
-
var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
7744
|
+
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
7745
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7630
7746
|
}, function (props) {
|
|
7631
7747
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -7738,24 +7854,24 @@ var Information = function Information(_ref) {
|
|
|
7738
7854
|
}))));
|
|
7739
7855
|
};
|
|
7740
7856
|
|
|
7741
|
-
var _templateObject$
|
|
7742
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7857
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
|
|
7858
|
+
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
7859
|
var theme = _ref.theme;
|
|
7744
7860
|
return theme.colors.primary;
|
|
7745
7861
|
}, function (_ref2) {
|
|
7746
7862
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7747
7863
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7748
7864
|
}, devices.mobile);
|
|
7749
|
-
var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
7750
|
-
var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7865
|
+
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);
|
|
7866
|
+
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
7867
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7752
7868
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7753
7869
|
}, devices.mobile);
|
|
7754
|
-
var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
7870
|
+
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
7871
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7756
7872
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7757
7873
|
}, devices.mobile);
|
|
7758
|
-
var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
7874
|
+
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
7875
|
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
7876
|
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
7877
|
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"])));
|
|
@@ -7766,14 +7882,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7766
7882
|
link = _ref.link,
|
|
7767
7883
|
_ref$sponsor = _ref.sponsor,
|
|
7768
7884
|
sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
|
|
7769
|
-
children = _ref.children
|
|
7885
|
+
children = _ref.children,
|
|
7886
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7887
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
|
|
7888
|
+
_ref$copyCharLimit = _ref.copyCharLimit,
|
|
7889
|
+
copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
|
|
7890
|
+
_ref$titleCharLimit = _ref.titleCharLimit,
|
|
7891
|
+
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
7770
7892
|
|
|
7771
7893
|
var _ref2 = link || {},
|
|
7772
7894
|
linkText = _ref2.text,
|
|
7773
7895
|
restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
7774
7896
|
|
|
7775
|
-
var truncatedText = text == null ? void 0 : text.substring(0,
|
|
7776
|
-
var truncatedTitle = title && title.substring(0,
|
|
7897
|
+
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
7898
|
+
var truncatedTitle = title && title.substring(0, titleCharLimit);
|
|
7777
7899
|
var isTitleUnAvailable = !title;
|
|
7778
7900
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
7779
7901
|
"data-testid": "page-heading-wrapper",
|
|
@@ -7784,7 +7906,8 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7784
7906
|
}, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
7785
7907
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7786
7908
|
}, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
|
|
7787
|
-
level: 2
|
|
7909
|
+
level: 2,
|
|
7910
|
+
semanticLevel: semanticLevel
|
|
7788
7911
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
7789
7912
|
"data-testid": "page-heading-text"
|
|
7790
7913
|
}, /*#__PURE__*/React__default.createElement(PageHeadingText, {
|
|
@@ -7830,12 +7953,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7830
7953
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
7831
7954
|
};
|
|
7832
7955
|
|
|
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$
|
|
7956
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
|
|
7957
|
+
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);
|
|
7958
|
+
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);
|
|
7959
|
+
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);
|
|
7960
|
+
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);
|
|
7961
|
+
var LogoWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7839
7962
|
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
7963
|
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
7964
|
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);
|
|
@@ -7851,7 +7974,9 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7851
7974
|
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7852
7975
|
bgUrlDevice = _ref.bgUrlDevice,
|
|
7853
7976
|
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7854
|
-
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText
|
|
7977
|
+
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
7978
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7979
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7855
7980
|
var truncatedText = text && text.substring(0, 75);
|
|
7856
7981
|
|
|
7857
7982
|
var _ref2 = link || {},
|
|
@@ -7887,7 +8012,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7887
8012
|
}, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7888
8013
|
"data-testid": "impact-text"
|
|
7889
8014
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7890
|
-
level: 3
|
|
8015
|
+
level: 3,
|
|
8016
|
+
semanticLevel: semanticLevel
|
|
7891
8017
|
}, truncatedText)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
7892
8018
|
"data-testid": "impact-link"
|
|
7893
8019
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null), scrollHref ? /*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
@@ -7901,21 +8027,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7901
8027
|
}, "Scroll Down")) : null);
|
|
7902
8028
|
};
|
|
7903
8029
|
|
|
7904
|
-
var _templateObject$
|
|
7905
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8030
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
|
|
8031
|
+
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
8032
|
var color = _ref.color;
|
|
7907
8033
|
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
8034
|
}, devices.mobileAndTablet);
|
|
7909
|
-
var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8035
|
+
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
8036
|
var hasImage = _ref2.hasImage;
|
|
7911
8037
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7912
8038
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7913
8039
|
var hasImage = _ref3.hasImage;
|
|
7914
8040
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7915
8041
|
});
|
|
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$
|
|
8042
|
+
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);
|
|
8043
|
+
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);
|
|
8044
|
+
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
8045
|
|
|
7920
8046
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7921
8047
|
var _image$src, _image$alt;
|
|
@@ -7946,8 +8072,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7946
8072
|
}))));
|
|
7947
8073
|
};
|
|
7948
8074
|
|
|
7949
|
-
var _templateObject
|
|
7950
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8075
|
+
var _templateObject$$;
|
|
8076
|
+
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
8077
|
|
|
7952
8078
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7953
8079
|
var link = _ref.link,
|
|
@@ -7965,11 +8091,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7965
8091
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
7966
8092
|
};
|
|
7967
8093
|
|
|
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$
|
|
8094
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8095
|
+
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);
|
|
8096
|
+
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"])));
|
|
8097
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8098
|
+
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
8099
|
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
8100
|
var invert = _ref.invert,
|
|
7975
8101
|
theme = _ref.theme;
|
|
@@ -8100,7 +8226,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8100
8226
|
var isIOS = function isIOS() {
|
|
8101
8227
|
try {
|
|
8102
8228
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8103
|
-
if (typeof navigator === undefined) return false;
|
|
8229
|
+
if (typeof navigator === 'undefined') return false;
|
|
8104
8230
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8105
8231
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8106
8232
|
} catch (e) {
|
|
@@ -8116,7 +8242,7 @@ var useIOS = function useIOS() {
|
|
|
8116
8242
|
setIOS = _useState[1];
|
|
8117
8243
|
|
|
8118
8244
|
React.useEffect(function () {
|
|
8119
|
-
if (typeof navigator === undefined) return;
|
|
8245
|
+
if (typeof navigator === 'undefined') return;
|
|
8120
8246
|
setIOS(isIOS());
|
|
8121
8247
|
}, []);
|
|
8122
8248
|
return IOS;
|
|
@@ -8255,7 +8381,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8255
8381
|
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8256
8382
|
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8257
8383
|
brandingText = _ref4.brandingText,
|
|
8258
|
-
brandingLink = _ref4.brandingLink
|
|
8384
|
+
brandingLink = _ref4.brandingLink,
|
|
8385
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
8386
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
|
|
8387
|
+
_ref4$semanticLevel = _ref4.semanticLevel,
|
|
8388
|
+
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
8259
8389
|
|
|
8260
8390
|
var _ref5 = link || {},
|
|
8261
8391
|
linkText = _ref5.text,
|
|
@@ -8281,7 +8411,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8281
8411
|
})) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
8282
8412
|
video: video,
|
|
8283
8413
|
poster: poster
|
|
8284
|
-
})), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8414
|
+
})), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8285
8415
|
className: "page-heading-compact__background",
|
|
8286
8416
|
invert: invert
|
|
8287
8417
|
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
@@ -8291,22 +8421,22 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8291
8421
|
invert: invert
|
|
8292
8422
|
}), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8293
8423
|
level: titleSize,
|
|
8294
|
-
semanticLevel:
|
|
8424
|
+
semanticLevel: semanticLevel
|
|
8295
8425
|
}, title && truncate(title, 40))), link && /*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
|
|
8296
8426
|
invert: invert,
|
|
8297
8427
|
className: "page-heading-compact__button"
|
|
8298
8428
|
}), linkText))));
|
|
8299
8429
|
};
|
|
8300
8430
|
|
|
8301
|
-
var _templateObject
|
|
8302
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject
|
|
8303
|
-
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$
|
|
8431
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t;
|
|
8432
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8433
|
+
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
8434
|
|
|
8305
|
-
var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$
|
|
8435
|
+
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
8436
|
var active = _ref.active;
|
|
8307
8437
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8308
8438
|
});
|
|
8309
|
-
var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$
|
|
8439
|
+
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
8440
|
|
|
8311
8441
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8312
8442
|
// If there are less than 6 pages, return all pages
|
|
@@ -8375,12 +8505,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8375
8505
|
}))));
|
|
8376
8506
|
};
|
|
8377
8507
|
|
|
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$
|
|
8508
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
|
|
8509
|
+
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);
|
|
8510
|
+
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"])));
|
|
8511
|
+
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"])));
|
|
8512
|
+
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"])));
|
|
8513
|
+
var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
8384
8514
|
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
8515
|
|
|
8386
8516
|
var Person = function Person(_ref) {
|
|
@@ -8432,11 +8562,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8432
8562
|
}));
|
|
8433
8563
|
};
|
|
8434
8564
|
|
|
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$
|
|
8565
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v;
|
|
8566
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8567
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
8568
|
+
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"])));
|
|
8569
|
+
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
8570
|
|
|
8441
8571
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8442
8572
|
return array.reduce(function (acc, item) {
|
|
@@ -8447,12 +8577,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8447
8577
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8448
8578
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8449
8579
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8450
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8580
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8581
|
+
key: index
|
|
8582
|
+
}, title));
|
|
8451
8583
|
} else if (index > 0) {
|
|
8452
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8584
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8585
|
+
key: index
|
|
8586
|
+
}, ", ", title);
|
|
8453
8587
|
}
|
|
8454
8588
|
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8589
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8590
|
+
key: index
|
|
8591
|
+
}, title);
|
|
8456
8592
|
}));
|
|
8457
8593
|
};
|
|
8458
8594
|
|
|
@@ -8504,14 +8640,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8504
8640
|
}));
|
|
8505
8641
|
};
|
|
8506
8642
|
|
|
8507
|
-
var _templateObject$
|
|
8643
|
+
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
8644
|
var LENGTH_TEXT = 28;
|
|
8509
8645
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8510
8646
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8511
8647
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8512
8648
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8513
8649
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8514
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8650
|
+
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
8651
|
var imageToLeft = _ref.imageToLeft;
|
|
8516
8652
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8517
8653
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8521,8 +8657,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 ||
|
|
|
8521
8657
|
var asCard = _ref3.asCard;
|
|
8522
8658
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8523
8659
|
});
|
|
8524
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$
|
|
8525
|
-
var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8660
|
+
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"])));
|
|
8661
|
+
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
8662
|
var theme = _ref4.theme;
|
|
8527
8663
|
return theme.colors.black;
|
|
8528
8664
|
}, function (_ref5) {
|
|
@@ -8532,7 +8668,7 @@ var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$D || (
|
|
|
8532
8668
|
var theme = _ref6.theme;
|
|
8533
8669
|
return theme.colors.primary;
|
|
8534
8670
|
});
|
|
8535
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8671
|
+
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
8672
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8537
8673
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8538
8674
|
}, function (_ref8) {
|
|
@@ -8560,7 +8696,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$v ||
|
|
|
8560
8696
|
|
|
8561
8697
|
return '';
|
|
8562
8698
|
});
|
|
8563
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8699
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8564
8700
|
var marginBottom = _ref10.marginBottom;
|
|
8565
8701
|
return marginBottom + "px";
|
|
8566
8702
|
});
|
|
@@ -8782,26 +8918,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8782
8918
|
}))));
|
|
8783
8919
|
};
|
|
8784
8920
|
|
|
8785
|
-
var _templateObject$
|
|
8921
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
8786
8922
|
var LENGTH_TEXT$2 = 28;
|
|
8787
8923
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8788
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8924
|
+
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
8925
|
var imageToLeft = _ref.imageToLeft;
|
|
8790
8926
|
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
8927
|
}, devices.tablet, function (_ref2) {
|
|
8792
8928
|
var imageToLeft = _ref2.imageToLeft;
|
|
8793
8929
|
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
8930
|
}, devices.mobile);
|
|
8795
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8931
|
+
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
8932
|
var imageToLeft = _ref3.imageToLeft;
|
|
8797
8933
|
return imageToLeft ? 'left' : 'right';
|
|
8798
8934
|
}, devices.mobile);
|
|
8799
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8935
|
+
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
8936
|
var imageToLeft = _ref4.imageToLeft;
|
|
8801
8937
|
return imageToLeft ? 'right' : 'left';
|
|
8802
8938
|
}, devices.mobile);
|
|
8803
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$
|
|
8804
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$
|
|
8939
|
+
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);
|
|
8940
|
+
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
8941
|
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
8942
|
var theme = _ref5.theme;
|
|
8807
8943
|
return theme.colors.black;
|
|
@@ -8838,8 +8974,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
8838
8974
|
return '';
|
|
8839
8975
|
});
|
|
8840
8976
|
|
|
8841
|
-
var _templateObject$
|
|
8842
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8977
|
+
var _templateObject$16;
|
|
8978
|
+
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\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
8843
8979
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8844
8980
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8845
8981
|
return aspectRatio;
|
|
@@ -8851,6 +8987,10 @@ var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_te
|
|
|
8851
8987
|
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
8852
8988
|
aspectRatio = _ref3$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
8853
8989
|
return AspectRatioLegacy[aspectRatio];
|
|
8990
|
+
}, function (_ref4) {
|
|
8991
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
8992
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
8993
|
+
return aspectRatio;
|
|
8854
8994
|
});
|
|
8855
8995
|
|
|
8856
8996
|
var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
@@ -8867,17 +9007,50 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8867
9007
|
return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
|
|
8868
9008
|
};
|
|
8869
9009
|
|
|
9010
|
+
/**
|
|
9011
|
+
* Generates a random string in the format XXX-XXX.
|
|
9012
|
+
* Does not meet UUID standards.
|
|
9013
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
9014
|
+
*
|
|
9015
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
9016
|
+
*/
|
|
9017
|
+
var generateDomElementId = function generateDomElementId() {
|
|
9018
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
9019
|
+
var datePart = Date.now().toString().slice(-3);
|
|
9020
|
+
return randomPart + "-" + datePart;
|
|
9021
|
+
};
|
|
9022
|
+
|
|
8870
9023
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8871
9024
|
var video = _ref.video,
|
|
8872
9025
|
settings = _ref.settings;
|
|
8873
|
-
var
|
|
8874
|
-
autoPlay = settings.autoPlay;
|
|
9026
|
+
var videoRef = React.useRef(null);
|
|
8875
9027
|
|
|
8876
9028
|
var _useState = React.useState(exports.AspectRatio['16:9']),
|
|
8877
9029
|
aspectRatio = _useState[0],
|
|
8878
9030
|
setAspectRatio = _useState[1];
|
|
8879
9031
|
|
|
8880
|
-
var
|
|
9032
|
+
var _React$useState = React__default.useState(false),
|
|
9033
|
+
isVideoReady = _React$useState[0],
|
|
9034
|
+
setIsVideoReady = _React$useState[1];
|
|
9035
|
+
|
|
9036
|
+
var muted = settings.muted,
|
|
9037
|
+
autoPlay = settings.autoPlay;
|
|
9038
|
+
React__default.useEffect(function () {
|
|
9039
|
+
var changeVideoReadiness = function changeVideoReadiness() {
|
|
9040
|
+
setIsVideoReady(true);
|
|
9041
|
+
};
|
|
9042
|
+
|
|
9043
|
+
if (videoRef.current) {
|
|
9044
|
+
videoRef.current.addEventListener('canplay', changeVideoReadiness);
|
|
9045
|
+
return function () {
|
|
9046
|
+
var _videoRef$current;
|
|
9047
|
+
|
|
9048
|
+
return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
|
|
9049
|
+
};
|
|
9050
|
+
}
|
|
9051
|
+
|
|
9052
|
+
return undefined;
|
|
9053
|
+
}, []);
|
|
8881
9054
|
|
|
8882
9055
|
var handleMetadataLoaded = function handleMetadataLoaded() {
|
|
8883
9056
|
if (videoRef.current) {
|
|
@@ -8886,18 +9059,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8886
9059
|
}
|
|
8887
9060
|
};
|
|
8888
9061
|
|
|
8889
|
-
var
|
|
9062
|
+
var videoElementId = React.useMemo(function () {
|
|
9063
|
+
return "video-id-" + generateDomElementId();
|
|
9064
|
+
}, []);
|
|
9065
|
+
var clonedVideo = /*#__PURE__*/React.cloneElement(video, _extends({
|
|
9066
|
+
playsInline: true
|
|
9067
|
+
}, muted ? {
|
|
8890
9068
|
muted: true
|
|
8891
9069
|
} : {}, autoPlay && muted ? {
|
|
8892
9070
|
autoPlay: true
|
|
8893
9071
|
} : {}, {
|
|
8894
9072
|
height: '100%',
|
|
8895
9073
|
width: '100%',
|
|
8896
|
-
onLoadedMetadata: handleMetadataLoaded
|
|
9074
|
+
onLoadedMetadata: handleMetadataLoaded,
|
|
9075
|
+
id: videoElementId
|
|
8897
9076
|
}, {
|
|
9077
|
+
poster: autoPlay && isVideoReady ? undefined : video.props.poster,
|
|
8898
9078
|
ref: videoRef
|
|
8899
9079
|
}));
|
|
8900
|
-
var videoElementId = clonedVideo.props.id;
|
|
8901
9080
|
var videoContainerId = "video-container-for-" + videoElementId;
|
|
8902
9081
|
|
|
8903
9082
|
var videoControlsProps = _extends({}, settings, {
|
|
@@ -8905,14 +9084,12 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8905
9084
|
videoContainerId: videoContainerId
|
|
8906
9085
|
});
|
|
8907
9086
|
|
|
8908
|
-
|
|
8909
|
-
setAspectRatio(exports.AspectRatio['16:9']);
|
|
8910
|
-
}, [video.props.src]);
|
|
9087
|
+
var showVideoControls = autoPlay ? isVideoReady : true;
|
|
8911
9088
|
return /*#__PURE__*/React__default.createElement(VideoContainer, {
|
|
8912
9089
|
aspectRatio: aspectRatio,
|
|
8913
9090
|
id: videoContainerId,
|
|
8914
|
-
"data-testid":
|
|
8915
|
-
}, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
9091
|
+
"data-testid": 'video-container'
|
|
9092
|
+
}, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
8916
9093
|
};
|
|
8917
9094
|
|
|
8918
9095
|
var PromoChild = function PromoChild(_ref) {
|
|
@@ -8946,7 +9123,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8946
9123
|
text = _ref.text,
|
|
8947
9124
|
links = _ref.links,
|
|
8948
9125
|
children = _ref.children,
|
|
8949
|
-
videoSettings = _ref.videoSettings
|
|
9126
|
+
videoSettings = _ref.videoSettings,
|
|
9127
|
+
titleSemanticLevel = _ref.titleSemanticLevel;
|
|
8950
9128
|
|
|
8951
9129
|
var truncate = function truncate(str, n) {
|
|
8952
9130
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -8987,7 +9165,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8987
9165
|
"data-testid": "content-wrapper",
|
|
8988
9166
|
imageToLeft: imageToLeft
|
|
8989
9167
|
}, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8990
|
-
level: titleLevel
|
|
9168
|
+
level: titleLevel,
|
|
9169
|
+
semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
|
|
8991
9170
|
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
|
|
8992
9171
|
dangerouslySetInnerHTML: {
|
|
8993
9172
|
__html: text
|
|
@@ -8999,8 +9178,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8999
9178
|
}, 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
9179
|
};
|
|
9001
9180
|
|
|
9002
|
-
var _templateObject$
|
|
9003
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9181
|
+
var _templateObject$17;
|
|
9182
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9004
9183
|
|
|
9005
9184
|
/**
|
|
9006
9185
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9058,9 +9237,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9058
9237
|
})));
|
|
9059
9238
|
};
|
|
9060
9239
|
|
|
9061
|
-
var _templateObject$
|
|
9062
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9063
|
-
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9240
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$G;
|
|
9241
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9242
|
+
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
9243
|
var horizontalMode = _ref.horizontalMode;
|
|
9065
9244
|
if (horizontalMode) return 'row';
|
|
9066
9245
|
return 'column';
|
|
@@ -9068,7 +9247,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$N || (_temp
|
|
|
9068
9247
|
var gap = _ref2.gap;
|
|
9069
9248
|
return gap + "px";
|
|
9070
9249
|
});
|
|
9071
|
-
var ErrorLabel$
|
|
9250
|
+
var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9072
9251
|
var darkMode = _ref3.darkMode;
|
|
9073
9252
|
if (darkMode) return 'var(--base-color-white)';
|
|
9074
9253
|
return 'var(--base-color-errorstate)';
|
|
@@ -9140,7 +9319,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9140
9319
|
error: error !== undefined ? '' : undefined,
|
|
9141
9320
|
onChange: changeHandler
|
|
9142
9321
|
}, radio.content);
|
|
9143
|
-
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9322
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
9144
9323
|
darkMode: darkMode,
|
|
9145
9324
|
"data-testid": "radio-group-error-label"
|
|
9146
9325
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9148,10 +9327,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9148
9327
|
}, error)));
|
|
9149
9328
|
};
|
|
9150
9329
|
|
|
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$
|
|
9330
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$H;
|
|
9331
|
+
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);
|
|
9332
|
+
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"])));
|
|
9333
|
+
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
9334
|
|
|
9156
9335
|
var StatusBanner = function StatusBanner(_ref) {
|
|
9157
9336
|
var statusText = _ref.statusText,
|
|
@@ -9213,14 +9392,15 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9213
9392
|
})))));
|
|
9214
9393
|
};
|
|
9215
9394
|
|
|
9216
|
-
var _templateObject$
|
|
9217
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9395
|
+
var _templateObject$1a;
|
|
9396
|
+
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
9397
|
|
|
9219
9398
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9220
9399
|
var title = _ref.title,
|
|
9221
9400
|
_ref$size = _ref.size,
|
|
9222
9401
|
size = _ref$size === void 0 ? 'small' : _ref$size,
|
|
9223
|
-
description = _ref.description
|
|
9402
|
+
description = _ref.description,
|
|
9403
|
+
semanticLevel = _ref.semanticLevel;
|
|
9224
9404
|
var headingLevel = size === 'large' ? 1 : 2;
|
|
9225
9405
|
return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9226
9406
|
columnStartDesktop: 3,
|
|
@@ -9228,7 +9408,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9228
9408
|
columnStartDevice: 2,
|
|
9229
9409
|
columnSpanDevice: 12
|
|
9230
9410
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
9231
|
-
level: headingLevel
|
|
9411
|
+
level: headingLevel,
|
|
9412
|
+
semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
|
|
9232
9413
|
}, title)), description && /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9233
9414
|
columnStartDesktop: 3,
|
|
9234
9415
|
columnSpanDesktop: 8,
|
|
@@ -9240,8 +9421,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9240
9421
|
}, description))));
|
|
9241
9422
|
};
|
|
9242
9423
|
|
|
9243
|
-
var _templateObject$
|
|
9244
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9424
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9425
|
+
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
9426
|
var theme = _ref.theme;
|
|
9246
9427
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9247
9428
|
}, function (_ref2) {
|
|
@@ -9251,12 +9432,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject
|
|
|
9251
9432
|
var theme = _ref3.theme;
|
|
9252
9433
|
return theme.colors.lightgrey;
|
|
9253
9434
|
});
|
|
9254
|
-
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$
|
|
9435
|
+
var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9255
9436
|
var theme = _ref4.theme;
|
|
9256
9437
|
return theme.colors.darkgrey;
|
|
9257
9438
|
});
|
|
9258
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$
|
|
9259
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$
|
|
9439
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9440
|
+
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9260
9441
|
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
9261
9442
|
var theme = _ref5.theme;
|
|
9262
9443
|
return {
|
|
@@ -9264,7 +9445,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
|
9264
9445
|
color: theme.colors.black,
|
|
9265
9446
|
title: 'Select Arrow'
|
|
9266
9447
|
};
|
|
9267
|
-
})(_templateObject5$
|
|
9448
|
+
})(_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
9449
|
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
9450
|
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9270
9451
|
var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -9663,9 +9844,9 @@ function Select(_ref3) {
|
|
|
9663
9844
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9664
9845
|
}
|
|
9665
9846
|
|
|
9666
|
-
var _templateObject$
|
|
9667
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9668
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
9847
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$J, _templateObject4$z;
|
|
9848
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9849
|
+
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
9850
|
var width = _ref.width;
|
|
9670
9851
|
if (!width) return 'none';
|
|
9671
9852
|
return width + 'px';
|
|
@@ -9682,12 +9863,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_t
|
|
|
9682
9863
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9683
9864
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9684
9865
|
});
|
|
9685
|
-
var TextLabel$
|
|
9866
|
+
var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9686
9867
|
var darkMode = _ref5.darkMode;
|
|
9687
9868
|
if (darkMode) return "var(--base-color-white)";
|
|
9688
9869
|
return "var(--base-color-black)";
|
|
9689
9870
|
});
|
|
9690
|
-
var ErrorLabel$
|
|
9871
|
+
var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9691
9872
|
var darkMode = _ref6.darkMode;
|
|
9692
9873
|
if (darkMode) return "var(--base-color-white)";
|
|
9693
9874
|
return "var(--base-color-errorstate)";
|
|
@@ -9704,7 +9885,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9704
9885
|
width = _ref.width,
|
|
9705
9886
|
darkMode = _ref.darkMode,
|
|
9706
9887
|
children = _ref.children;
|
|
9707
|
-
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$
|
|
9888
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9708
9889
|
darkMode: darkMode,
|
|
9709
9890
|
"data-testid": "select2-text-label"
|
|
9710
9891
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9713,7 +9894,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9713
9894
|
width: width,
|
|
9714
9895
|
error: error,
|
|
9715
9896
|
darkMode: darkMode
|
|
9716
|
-
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9897
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9717
9898
|
darkMode: darkMode,
|
|
9718
9899
|
"data-testid": "select2-error-label"
|
|
9719
9900
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9803,8 +9984,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9803
9984
|
})));
|
|
9804
9985
|
};
|
|
9805
9986
|
|
|
9806
|
-
var _templateObject$
|
|
9807
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9987
|
+
var _templateObject$1d;
|
|
9988
|
+
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
9989
|
var theme = _ref.theme;
|
|
9809
9990
|
return theme.colors.primary;
|
|
9810
9991
|
});
|
|
@@ -9832,8 +10013,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9832
10013
|
})));
|
|
9833
10014
|
};
|
|
9834
10015
|
|
|
9835
|
-
var _templateObject$
|
|
9836
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10016
|
+
var _templateObject$1e, _templateObject2$S;
|
|
10017
|
+
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
10018
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9838
10019
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9839
10020
|
return aspectRatio;
|
|
@@ -9843,7 +10024,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templat
|
|
|
9843
10024
|
height = _ref2.height;
|
|
9844
10025
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9845
10026
|
});
|
|
9846
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10027
|
+
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
10028
|
|
|
9848
10029
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9849
10030
|
var caption = _ref.caption,
|
|
@@ -9881,13 +10062,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9881
10062
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9882
10063
|
};
|
|
9883
10064
|
|
|
9884
|
-
var _templateObject$
|
|
9885
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9886
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
10065
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$K;
|
|
10066
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10067
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9887
10068
|
var displayAttribution = _ref.displayAttribution;
|
|
9888
10069
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9889
10070
|
});
|
|
9890
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10071
|
+
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
10072
|
|
|
9892
10073
|
var Quote = function Quote(_ref) {
|
|
9893
10074
|
var text = _ref.text,
|
|
@@ -9911,12 +10092,12 @@ var Quote = function Quote(_ref) {
|
|
|
9911
10092
|
}, attribution))));
|
|
9912
10093
|
};
|
|
9913
10094
|
|
|
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$
|
|
10095
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
|
|
10096
|
+
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"])));
|
|
10097
|
+
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"])));
|
|
10098
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10099
|
+
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10100
|
+
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
10101
|
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
10102
|
|
|
9922
10103
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -9955,11 +10136,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9955
10136
|
}, title)))));
|
|
9956
10137
|
};
|
|
9957
10138
|
|
|
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$
|
|
10139
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
10140
|
+
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"])));
|
|
10141
|
+
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"])));
|
|
10142
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10143
|
+
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
10144
|
|
|
9964
10145
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9965
10146
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10057,15 +10238,113 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10057
10238
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10058
10239
|
};
|
|
10059
10240
|
|
|
10060
|
-
var _templateObject$
|
|
10061
|
-
var
|
|
10062
|
-
var
|
|
10063
|
-
var
|
|
10064
|
-
var
|
|
10241
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
|
|
10242
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10243
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10244
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10245
|
+
var color = _ref.color;
|
|
10246
|
+
return "var(--base-color-" + color + ")";
|
|
10247
|
+
});
|
|
10248
|
+
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"])));
|
|
10249
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10250
|
+
var color = _ref2.color;
|
|
10251
|
+
return "var(--base-color-" + color + ")";
|
|
10252
|
+
});
|
|
10253
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10254
|
+
var color = _ref3.color;
|
|
10255
|
+
return "var(--base-color-" + color + ")";
|
|
10256
|
+
});
|
|
10257
|
+
|
|
10258
|
+
/**
|
|
10259
|
+
* Password strength indicator component.
|
|
10260
|
+
* This renders some number of lines (6 by default)
|
|
10261
|
+
* which should become active when the user improves
|
|
10262
|
+
* the strength of the entered password.
|
|
10263
|
+
*
|
|
10264
|
+
* ## Sections
|
|
10265
|
+
* To set number of sections it should be passed
|
|
10266
|
+
* as `sections` prop.
|
|
10267
|
+
*
|
|
10268
|
+
* ## Active section
|
|
10269
|
+
* To set number of active sections it should be passed
|
|
10270
|
+
* as `activeSections` prop.
|
|
10271
|
+
*
|
|
10272
|
+
* ## Colors
|
|
10273
|
+
* Color of every element can be controlled by properties:
|
|
10274
|
+
* `sectionsColor`, `activeSectionsColor`,
|
|
10275
|
+
* `textColor`, `strengthLabelColor`.
|
|
10276
|
+
*
|
|
10277
|
+
* ## Text
|
|
10278
|
+
* `text` prop is used to render some message.
|
|
10279
|
+
* For example error (together with proper red color)
|
|
10280
|
+
* or some password requirement. It can be empty.
|
|
10281
|
+
*
|
|
10282
|
+
* ## Strength label
|
|
10283
|
+
* `strengthLabel` prop is used to render strength characteristic
|
|
10284
|
+
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10285
|
+
* It can be empty.
|
|
10286
|
+
*/
|
|
10287
|
+
|
|
10288
|
+
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10289
|
+
var _ref$sections = _ref.sections,
|
|
10290
|
+
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10291
|
+
_ref$activeSections = _ref.activeSections,
|
|
10292
|
+
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10293
|
+
_ref$sectionsColor = _ref.sectionsColor,
|
|
10294
|
+
sectionsColor = _ref$sectionsColor === void 0 ? exports.Colors.MidGrey : _ref$sectionsColor,
|
|
10295
|
+
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10296
|
+
activeSectionsColor = _ref$activeSectionsCo === void 0 ? exports.Colors.Black : _ref$activeSectionsCo,
|
|
10297
|
+
_ref$text = _ref.text,
|
|
10298
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10299
|
+
_ref$textColor = _ref.textColor,
|
|
10300
|
+
textColor = _ref$textColor === void 0 ? exports.Colors.Black : _ref$textColor,
|
|
10301
|
+
_ref$strengthLabel = _ref.strengthLabel,
|
|
10302
|
+
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10303
|
+
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10304
|
+
strengthLabelColor = _ref$strengthLabelCol === void 0 ? exports.Colors.Black : _ref$strengthLabelCol;
|
|
10305
|
+
|
|
10306
|
+
var setSectionColor = function setSectionColor(index) {
|
|
10307
|
+
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10308
|
+
};
|
|
10309
|
+
|
|
10310
|
+
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10311
|
+
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10312
|
+
};
|
|
10313
|
+
|
|
10314
|
+
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10315
|
+
"data-testid": "password-strength-container"
|
|
10316
|
+
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10317
|
+
"data-testid": "password-strength-sections"
|
|
10318
|
+
}, Array.from({
|
|
10319
|
+
length: sections
|
|
10320
|
+
}, function (_section, i) {
|
|
10321
|
+
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10322
|
+
key: i,
|
|
10323
|
+
color: setSectionColor(i),
|
|
10324
|
+
"data-testid": setSectionDataTestId(i)
|
|
10325
|
+
});
|
|
10326
|
+
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10327
|
+
color: textColor,
|
|
10328
|
+
"data-testid": "password-strength-text"
|
|
10329
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10330
|
+
level: 6
|
|
10331
|
+
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10332
|
+
color: strengthLabelColor,
|
|
10333
|
+
"data-testid": "password-strength-label"
|
|
10334
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10335
|
+
level: 2
|
|
10336
|
+
}, strengthLabel))));
|
|
10337
|
+
};
|
|
10338
|
+
|
|
10339
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t;
|
|
10340
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10341
|
+
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);
|
|
10342
|
+
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);
|
|
10343
|
+
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) {
|
|
10065
10344
|
var isActive = _ref.isActive;
|
|
10066
10345
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10067
10346
|
}, exports.Colors.MidGrey);
|
|
10068
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10347
|
+
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) {
|
|
10069
10348
|
var isOpen = _ref2.isOpen;
|
|
10070
10349
|
return isOpen ? 'block' : 'none';
|
|
10071
10350
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10076,15 +10355,24 @@ var NavItem = function NavItem(_ref) {
|
|
|
10076
10355
|
onClick = _ref.onClick,
|
|
10077
10356
|
isActive = _ref.isActive,
|
|
10078
10357
|
isMobile = _ref.isMobile;
|
|
10079
|
-
|
|
10080
|
-
|
|
10081
|
-
|
|
10082
|
-
|
|
10083
|
-
e.preventDefault();
|
|
10084
|
-
onClick();
|
|
10358
|
+
var linkRef = React.useRef(null);
|
|
10359
|
+
React.useEffect(function () {
|
|
10360
|
+
var handleClick = function handleClick(e) {
|
|
10361
|
+
if (onClick) onClick(e);
|
|
10085
10362
|
};
|
|
10086
|
-
}();
|
|
10087
10363
|
|
|
10364
|
+
var linkElement = linkRef.current;
|
|
10365
|
+
|
|
10366
|
+
if (linkElement) {
|
|
10367
|
+
linkElement.addEventListener('click', handleClick);
|
|
10368
|
+
}
|
|
10369
|
+
|
|
10370
|
+
return function () {
|
|
10371
|
+
if (linkElement) {
|
|
10372
|
+
linkElement.removeEventListener('click', handleClick);
|
|
10373
|
+
}
|
|
10374
|
+
};
|
|
10375
|
+
}, [onClick]);
|
|
10088
10376
|
var ariaCurrent = isMobile ? undefined : isActive;
|
|
10089
10377
|
var ariaSelected = isMobile ? isActive : undefined;
|
|
10090
10378
|
var role = isMobile ? 'option' : undefined;
|
|
@@ -10093,7 +10381,7 @@ var NavItem = function NavItem(_ref) {
|
|
|
10093
10381
|
"aria-selected": ariaSelected,
|
|
10094
10382
|
role: role
|
|
10095
10383
|
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
10096
|
-
|
|
10384
|
+
ref: linkRef,
|
|
10097
10385
|
href: href,
|
|
10098
10386
|
isActive: isActive,
|
|
10099
10387
|
"data-testid": "nav-menu-item" + (isActive ? '-active' : '')
|
|
@@ -10162,16 +10450,16 @@ var MobileNav = function MobileNav(_ref4) {
|
|
|
10162
10450
|
"aria-expanded": isOpen,
|
|
10163
10451
|
"aria-controls": "auxiliary-nav-list",
|
|
10164
10452
|
"aria-haspopup": "listbox",
|
|
10165
|
-
role:
|
|
10453
|
+
role: "combobox"
|
|
10166
10454
|
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10167
10455
|
iconName: "DropdownArrow",
|
|
10168
10456
|
direction: isOpen ? 'left' : 'right'
|
|
10169
10457
|
})), /*#__PURE__*/React__default.createElement(MobileMenuList, {
|
|
10170
|
-
id:
|
|
10458
|
+
id: "auxiliary-nav-list",
|
|
10171
10459
|
"data-testid": "nav-menu-list",
|
|
10172
10460
|
isOpen: isOpen,
|
|
10173
10461
|
"aria-hidden": !isOpen,
|
|
10174
|
-
role:
|
|
10462
|
+
role: "listbox"
|
|
10175
10463
|
}, items.map(function (_ref5, idx) {
|
|
10176
10464
|
var text = _ref5.text,
|
|
10177
10465
|
href = _ref5.href,
|
|
@@ -10226,112 +10514,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10226
10514
|
});
|
|
10227
10515
|
};
|
|
10228
10516
|
|
|
10229
|
-
var _templateObject$
|
|
10230
|
-
var
|
|
10231
|
-
var
|
|
10232
|
-
var
|
|
10233
|
-
|
|
10234
|
-
return "var(--base-color-" + color + ")";
|
|
10235
|
-
});
|
|
10236
|
-
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"])));
|
|
10237
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10238
|
-
var color = _ref2.color;
|
|
10239
|
-
return "var(--base-color-" + color + ")";
|
|
10240
|
-
});
|
|
10241
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10242
|
-
var color = _ref3.color;
|
|
10243
|
-
return "var(--base-color-" + color + ")";
|
|
10244
|
-
});
|
|
10245
|
-
|
|
10246
|
-
/**
|
|
10247
|
-
* Password strength indicator component.
|
|
10248
|
-
* This renders some number of lines (6 by default)
|
|
10249
|
-
* which should become active when the user improves
|
|
10250
|
-
* the strength of the entered password.
|
|
10251
|
-
*
|
|
10252
|
-
* ## Sections
|
|
10253
|
-
* To set number of sections it should be passed
|
|
10254
|
-
* as `sections` prop.
|
|
10255
|
-
*
|
|
10256
|
-
* ## Active section
|
|
10257
|
-
* To set number of active sections it should be passed
|
|
10258
|
-
* as `activeSections` prop.
|
|
10259
|
-
*
|
|
10260
|
-
* ## Colors
|
|
10261
|
-
* Color of every element can be controlled by properties:
|
|
10262
|
-
* `sectionsColor`, `activeSectionsColor`,
|
|
10263
|
-
* `textColor`, `strengthLabelColor`.
|
|
10264
|
-
*
|
|
10265
|
-
* ## Text
|
|
10266
|
-
* `text` prop is used to render some message.
|
|
10267
|
-
* For example error (together with proper red color)
|
|
10268
|
-
* or some password requirement. It can be empty.
|
|
10269
|
-
*
|
|
10270
|
-
* ## Strength label
|
|
10271
|
-
* `strengthLabel` prop is used to render strength characteristic
|
|
10272
|
-
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10273
|
-
* It can be empty.
|
|
10274
|
-
*/
|
|
10275
|
-
|
|
10276
|
-
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10277
|
-
var _ref$sections = _ref.sections,
|
|
10278
|
-
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10279
|
-
_ref$activeSections = _ref.activeSections,
|
|
10280
|
-
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10281
|
-
_ref$sectionsColor = _ref.sectionsColor,
|
|
10282
|
-
sectionsColor = _ref$sectionsColor === void 0 ? exports.Colors.MidGrey : _ref$sectionsColor,
|
|
10283
|
-
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10284
|
-
activeSectionsColor = _ref$activeSectionsCo === void 0 ? exports.Colors.Black : _ref$activeSectionsCo,
|
|
10285
|
-
_ref$text = _ref.text,
|
|
10286
|
-
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10287
|
-
_ref$textColor = _ref.textColor,
|
|
10288
|
-
textColor = _ref$textColor === void 0 ? exports.Colors.Black : _ref$textColor,
|
|
10289
|
-
_ref$strengthLabel = _ref.strengthLabel,
|
|
10290
|
-
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10291
|
-
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10292
|
-
strengthLabelColor = _ref$strengthLabelCol === void 0 ? exports.Colors.Black : _ref$strengthLabelCol;
|
|
10293
|
-
|
|
10294
|
-
var setSectionColor = function setSectionColor(index) {
|
|
10295
|
-
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10296
|
-
};
|
|
10297
|
-
|
|
10298
|
-
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10299
|
-
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10300
|
-
};
|
|
10301
|
-
|
|
10302
|
-
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10303
|
-
"data-testid": "password-strength-container"
|
|
10304
|
-
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10305
|
-
"data-testid": "password-strength-sections"
|
|
10306
|
-
}, Array.from({
|
|
10307
|
-
length: sections
|
|
10308
|
-
}, function (_section, i) {
|
|
10309
|
-
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10310
|
-
key: i,
|
|
10311
|
-
color: setSectionColor(i),
|
|
10312
|
-
"data-testid": setSectionDataTestId(i)
|
|
10313
|
-
});
|
|
10314
|
-
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10315
|
-
color: textColor,
|
|
10316
|
-
"data-testid": "password-strength-text"
|
|
10317
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10318
|
-
level: 6
|
|
10319
|
-
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10320
|
-
color: strengthLabelColor,
|
|
10321
|
-
"data-testid": "password-strength-label"
|
|
10322
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10323
|
-
level: 2
|
|
10324
|
-
}, strengthLabel))));
|
|
10325
|
-
};
|
|
10326
|
-
|
|
10327
|
-
var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10328
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10329
|
-
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10330
|
-
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10331
|
-
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__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) {
|
|
10517
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10518
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10519
|
+
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10520
|
+
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10521
|
+
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) {
|
|
10332
10522
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10333
10523
|
}, devices.tablet, devices.mobile);
|
|
10334
|
-
var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$
|
|
10524
|
+
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) {
|
|
10335
10525
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10336
10526
|
}, devices.mobile);
|
|
10337
10527
|
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) {
|
|
@@ -10609,9 +10799,9 @@ var LiveChat = function LiveChat() {
|
|
|
10609
10799
|
});
|
|
10610
10800
|
};
|
|
10611
10801
|
|
|
10612
|
-
var _templateObject$
|
|
10613
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10614
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
10802
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
10803
|
+
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);
|
|
10804
|
+
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) {
|
|
10615
10805
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10616
10806
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10617
10807
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10639,11 +10829,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10639
10829
|
}, children)));
|
|
10640
10830
|
};
|
|
10641
10831
|
|
|
10642
|
-
var _templateObject$
|
|
10643
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10644
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
10645
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
10646
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
10832
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
10833
|
+
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);
|
|
10834
|
+
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);
|
|
10835
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10836
|
+
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"])));
|
|
10647
10837
|
|
|
10648
10838
|
var MAX_Z_INDEX = 9999999999;
|
|
10649
10839
|
|
|
@@ -10763,8 +10953,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10763
10953
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
10764
10954
|
};
|
|
10765
10955
|
|
|
10766
|
-
var _templateObject$
|
|
10767
|
-
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) {
|
|
10956
|
+
var _templateObject$1n;
|
|
10957
|
+
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) {
|
|
10768
10958
|
var theme = _ref.theme;
|
|
10769
10959
|
return theme.colors.primary;
|
|
10770
10960
|
}, function (_ref2) {
|
|
@@ -11725,6 +11915,7 @@ exports.Footer = Footer;
|
|
|
11725
11915
|
exports.GlobalStyles = GlobalStyles;
|
|
11726
11916
|
exports.Grid = Grid;
|
|
11727
11917
|
exports.GridItem = GridItem;
|
|
11918
|
+
exports.GridItemLegacy = GridItemLegacy;
|
|
11728
11919
|
exports.Header = Header;
|
|
11729
11920
|
exports.Icon = Icon;
|
|
11730
11921
|
exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
|
|
@@ -11776,6 +11967,7 @@ exports.Tabs = Tabs;
|
|
|
11776
11967
|
exports.TertiaryButton = Button$1;
|
|
11777
11968
|
exports.TextArea = TextArea;
|
|
11778
11969
|
exports.TextField = TextField;
|
|
11970
|
+
exports.TextFieldLegacy = TextFieldLegacy;
|
|
11779
11971
|
exports.TextLink = TextLink;
|
|
11780
11972
|
exports.TextOnly = TextOnly;
|
|
11781
11973
|
exports.ThemeProvider = Theme;
|