@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
package/dist/chord.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, cloneElement } from 'react';
|
|
1
|
+
import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement } from 'react';
|
|
2
2
|
import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
3
3
|
import moment from 'moment';
|
|
4
4
|
import { renderToString } from 'react-dom/server';
|
|
@@ -2628,7 +2628,39 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
|
|
|
2628
2628
|
});
|
|
2629
2629
|
|
|
2630
2630
|
var _templateObject$b;
|
|
2631
|
-
|
|
2631
|
+
/**
|
|
2632
|
+
* # IMPORTANT
|
|
2633
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
2634
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
2635
|
+
*/
|
|
2636
|
+
|
|
2637
|
+
var GridItemLegacy = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", " / span\n ", ";\n\n @media ", " {\n & {\n grid-column: ", " /\n span ", ";\n }\n }\n\n @media ", " {\n & {\n grid-column: ", " / span\n ", ";\n }\n }\n"])), function (_ref) {
|
|
2638
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
2639
|
+
return columnStartDesktop;
|
|
2640
|
+
}, function (_ref2) {
|
|
2641
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
2642
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
2643
|
+
return columnSpanDesktop;
|
|
2644
|
+
}, devices.mobile, function (_ref3) {
|
|
2645
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
2646
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
2647
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
2648
|
+
}, function (_ref4) {
|
|
2649
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
2650
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
2651
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
2652
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
2653
|
+
}, devices.tablet, function (_ref5) {
|
|
2654
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
2655
|
+
return columnStartDevice;
|
|
2656
|
+
}, function (_ref6) {
|
|
2657
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
2658
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
2659
|
+
return columnSpanDevice;
|
|
2660
|
+
});
|
|
2661
|
+
|
|
2662
|
+
var _templateObject$c;
|
|
2663
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
2632
2664
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
2633
2665
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
2634
2666
|
return aspectRatio;
|
|
@@ -2646,8 +2678,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
|
|
|
2646
2678
|
return aspectRatio;
|
|
2647
2679
|
});
|
|
2648
2680
|
|
|
2649
|
-
var _templateObject$
|
|
2650
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
2681
|
+
var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
2682
|
+
var ProgressView = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
2651
2683
|
var height = _ref.height;
|
|
2652
2684
|
return height ? height + "px" : '6px';
|
|
2653
2685
|
});
|
|
@@ -2730,13 +2762,13 @@ var Progress = function Progress(_ref) {
|
|
|
2730
2762
|
}, renderSteps()));
|
|
2731
2763
|
};
|
|
2732
2764
|
|
|
2733
|
-
var _templateObject$
|
|
2734
|
-
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
2765
|
+
var _templateObject$e, _templateObject2$4, _templateObject3$3;
|
|
2766
|
+
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
2735
2767
|
var RadioLine = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
|
|
2736
2768
|
var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
2737
2769
|
|
|
2738
|
-
var _templateObject$
|
|
2739
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
2770
|
+
var _templateObject$f;
|
|
2771
|
+
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
2740
2772
|
var typography = _ref.typography;
|
|
2741
2773
|
return typography;
|
|
2742
2774
|
}, function (_ref2) {
|
|
@@ -2792,9 +2824,10 @@ var StyledTag = function StyledTag(_ref) {
|
|
|
2792
2824
|
}, children);
|
|
2793
2825
|
};
|
|
2794
2826
|
var AltHeader = function AltHeader(_ref2) {
|
|
2795
|
-
var
|
|
2827
|
+
var semanticLevel = _ref2.semanticLevel,
|
|
2828
|
+
level = _ref2.level,
|
|
2796
2829
|
children = _ref2.children;
|
|
2797
|
-
var renderedTag = "h" + level;
|
|
2830
|
+
var renderedTag = semanticLevel ? "h" + semanticLevel : "h" + level;
|
|
2798
2831
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
2799
2832
|
tag: renderedTag,
|
|
2800
2833
|
typography: "altHeader",
|
|
@@ -2892,8 +2925,8 @@ var Radio = function Radio(_ref) {
|
|
|
2892
2925
|
}, error)));
|
|
2893
2926
|
};
|
|
2894
2927
|
|
|
2895
|
-
var _templateObject$
|
|
2896
|
-
var Container = /*#__PURE__*/styled.div(_templateObject$
|
|
2928
|
+
var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
2929
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
2897
2930
|
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
2898
2931
|
var error = _ref.error,
|
|
2899
2932
|
darkMode = _ref.darkMode,
|
|
@@ -3001,8 +3034,8 @@ var Radio2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3001
3034
|
}, error)));
|
|
3002
3035
|
});
|
|
3003
3036
|
|
|
3004
|
-
var _templateObject$
|
|
3005
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3037
|
+
var _templateObject$h, _templateObject2$6, _templateObject3$5;
|
|
3038
|
+
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3006
3039
|
var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
|
|
3007
3040
|
var theme = _ref.theme;
|
|
3008
3041
|
return theme.colors.primary;
|
|
@@ -3073,8 +3106,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3073
3106
|
}, renderNextIcon()));
|
|
3074
3107
|
};
|
|
3075
3108
|
|
|
3076
|
-
var _templateObject$
|
|
3077
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3109
|
+
var _templateObject$i;
|
|
3110
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3078
3111
|
var fillColor = _ref.fillColor;
|
|
3079
3112
|
return fillColor;
|
|
3080
3113
|
});
|
|
@@ -3098,8 +3131,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3098
3131
|
})));
|
|
3099
3132
|
};
|
|
3100
3133
|
|
|
3101
|
-
var _templateObject$
|
|
3102
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3134
|
+
var _templateObject$j, _templateObject2$7;
|
|
3135
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3103
3136
|
var Splitter = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3104
3137
|
|
|
3105
3138
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3118,8 +3151,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3118
3151
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3119
3152
|
};
|
|
3120
3153
|
|
|
3121
|
-
var _templateObject$
|
|
3122
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3154
|
+
var _templateObject$k;
|
|
3155
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3123
3156
|
|
|
3124
3157
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3125
3158
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3329,8 +3362,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3329
3362
|
})))));
|
|
3330
3363
|
};
|
|
3331
3364
|
|
|
3332
|
-
var _templateObject$
|
|
3333
|
-
var CustomImage = /*#__PURE__*/styled.img(_templateObject$
|
|
3365
|
+
var _templateObject$l, _templateObject2$8;
|
|
3366
|
+
var CustomImage = /*#__PURE__*/styled.img(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
|
|
3334
3367
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
|
|
3335
3368
|
|
|
3336
3369
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3363,8 +3396,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3363
3396
|
}));
|
|
3364
3397
|
};
|
|
3365
3398
|
|
|
3366
|
-
var _templateObject$
|
|
3367
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3399
|
+
var _templateObject$m, _templateObject2$9;
|
|
3400
|
+
var TabText = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
|
|
3368
3401
|
if (props.withIcon === 'left') {
|
|
3369
3402
|
return "margin-left: 5px;";
|
|
3370
3403
|
}
|
|
@@ -3463,8 +3496,8 @@ var Tab = function Tab(_ref) {
|
|
|
3463
3496
|
}));
|
|
3464
3497
|
};
|
|
3465
3498
|
|
|
3466
|
-
var _templateObject$
|
|
3467
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3499
|
+
var _templateObject$n, _templateObject2$a;
|
|
3500
|
+
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3468
3501
|
var iconName = _ref.iconName;
|
|
3469
3502
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3470
3503
|
}, function (_ref2) {
|
|
@@ -3515,8 +3548,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3515
3548
|
})) : null, children);
|
|
3516
3549
|
};
|
|
3517
3550
|
|
|
3518
|
-
var _templateObject$
|
|
3519
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3551
|
+
var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
|
|
3552
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3520
3553
|
var width = _ref.width;
|
|
3521
3554
|
return width ? width + "px;" : '100%;';
|
|
3522
3555
|
}, function (_ref2) {
|
|
@@ -3639,8 +3672,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
3639
3672
|
}, error))));
|
|
3640
3673
|
};
|
|
3641
3674
|
|
|
3642
|
-
var _templateObject$
|
|
3643
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3675
|
+
var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
3676
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3644
3677
|
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
3645
3678
|
var width = _ref.width;
|
|
3646
3679
|
if (!width) return 'none';
|
|
@@ -3766,15 +3799,87 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3766
3799
|
}, error)));
|
|
3767
3800
|
});
|
|
3768
3801
|
|
|
3769
|
-
var _templateObject$
|
|
3770
|
-
var
|
|
3802
|
+
var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
3803
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3804
|
+
var textStyles = /*#__PURE__*/css(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
3805
|
+
var theme = _ref.theme;
|
|
3806
|
+
return theme.fonts.desktop.weights.body[1];
|
|
3807
|
+
}, function (_ref2) {
|
|
3808
|
+
var theme = _ref2.theme;
|
|
3809
|
+
return theme.fonts.desktop.sizes.altHeaders[6];
|
|
3810
|
+
}, function (_ref3) {
|
|
3811
|
+
var theme = _ref3.theme;
|
|
3812
|
+
return theme.spacing[7];
|
|
3813
|
+
});
|
|
3814
|
+
var Input$1 = /*#__PURE__*/styled.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
|
|
3815
|
+
var width = _ref4.width;
|
|
3816
|
+
return width ? width + 'px' : '196px';
|
|
3817
|
+
}, function (_ref5) {
|
|
3818
|
+
var theme = _ref5.theme;
|
|
3819
|
+
return theme.colors.darkgrey;
|
|
3820
|
+
}, function (_ref6) {
|
|
3821
|
+
var error = _ref6.error,
|
|
3822
|
+
theme = _ref6.theme;
|
|
3823
|
+
if (!error) return;
|
|
3824
|
+
return "\n border: 1px solid " + theme.colors.error + ";\n ";
|
|
3825
|
+
}, function (_ref7) {
|
|
3826
|
+
var theme = _ref7.theme;
|
|
3827
|
+
return theme.colors.lightgrey;
|
|
3828
|
+
}, function (_ref8) {
|
|
3829
|
+
var darkMode = _ref8.darkMode,
|
|
3830
|
+
theme = _ref8.theme;
|
|
3831
|
+
if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
|
|
3832
|
+
return "3px solid " + theme.colors.lapisLazuli;
|
|
3833
|
+
});
|
|
3834
|
+
var TextLabel$2 = /*#__PURE__*/styled.p(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
|
|
3835
|
+
var darkMode = _ref9.darkMode,
|
|
3836
|
+
theme = _ref9.theme;
|
|
3837
|
+
return darkMode ? theme.colors.white : theme.colors.black;
|
|
3838
|
+
});
|
|
3839
|
+
var ErrorLabel$2 = /*#__PURE__*/styled.p(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
|
|
3840
|
+
var darkMode = _ref10.darkMode,
|
|
3841
|
+
theme = _ref10.theme;
|
|
3842
|
+
return darkMode ? theme.colors.white : theme.colors.error;
|
|
3843
|
+
});
|
|
3844
|
+
|
|
3845
|
+
/**
|
|
3846
|
+
* # IMPORTANT
|
|
3847
|
+
* Please use the `<TextField />` component instead of this component if possible.
|
|
3848
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3849
|
+
* */
|
|
3850
|
+
|
|
3851
|
+
var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
3852
|
+
var label = _ref.label,
|
|
3853
|
+
error = _ref.error,
|
|
3854
|
+
_ref$darkMode = _ref.darkMode,
|
|
3855
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3856
|
+
width = _ref.width,
|
|
3857
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
|
|
3858
|
+
|
|
3859
|
+
return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
|
|
3860
|
+
darkMode: darkMode,
|
|
3861
|
+
"data-testid": "text-field-text-label"
|
|
3862
|
+
}, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
|
|
3863
|
+
type: "text",
|
|
3864
|
+
error: error,
|
|
3865
|
+
darkMode: darkMode,
|
|
3866
|
+
"data-testid": "text-field-input",
|
|
3867
|
+
width: width
|
|
3868
|
+
}, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
|
|
3869
|
+
darkMode: darkMode,
|
|
3870
|
+
"data-testid": "text-field-error-label"
|
|
3871
|
+
}, error) : null);
|
|
3872
|
+
};
|
|
3873
|
+
|
|
3874
|
+
var _templateObject$r, _templateObject2$e;
|
|
3875
|
+
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
3771
3876
|
var iconName = _ref.iconName;
|
|
3772
3877
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
3773
3878
|
}, function (_ref2) {
|
|
3774
3879
|
var color = _ref2.color;
|
|
3775
3880
|
return color;
|
|
3776
3881
|
});
|
|
3777
|
-
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$
|
|
3882
|
+
var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3778
3883
|
|
|
3779
3884
|
var TextLink = function TextLink(_ref) {
|
|
3780
3885
|
var children = _ref.children,
|
|
@@ -3796,20 +3901,20 @@ var TextLink = function TextLink(_ref) {
|
|
|
3796
3901
|
})) : null);
|
|
3797
3902
|
};
|
|
3798
3903
|
|
|
3799
|
-
var _templateObject$
|
|
3800
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3904
|
+
var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
|
|
3905
|
+
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: 10px;\n margin-top: 140px;\n display: grid;\n grid-template-columns: repeat(2, auto);\n font-family: var(--font-family-header);\n font-size: ", ";\n color: ", ";\n width: auto;\n margin: auto;\n"])), function (_ref) {
|
|
3801
3906
|
var fontSize = _ref.fontSize;
|
|
3802
3907
|
return fontSize + 'px';
|
|
3803
3908
|
}, function (_ref2) {
|
|
3804
3909
|
var color = _ref2.color;
|
|
3805
3910
|
return color;
|
|
3806
3911
|
});
|
|
3807
|
-
var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$
|
|
3808
|
-
var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$
|
|
3912
|
+
var LogoRightSide = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 10px;\n font-weight: 500;\n letter-spacing: 1px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
|
|
3913
|
+
var LogoLeftSide = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-right: 1px solid ", ";\n padding-right: 10px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n"])), function (_ref3) {
|
|
3809
3914
|
var color = _ref3.color;
|
|
3810
3915
|
return color;
|
|
3811
3916
|
});
|
|
3812
|
-
var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$
|
|
3917
|
+
var LogoLeftSideRow = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n font-weight: 400;\n"])));
|
|
3813
3918
|
|
|
3814
3919
|
var TextLogoProduct;
|
|
3815
3920
|
|
|
@@ -3831,12 +3936,12 @@ var Logo = function Logo(_ref) {
|
|
|
3831
3936
|
}, /*#__PURE__*/createElement(LogoLeftSideRow, null, "ROYAL"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "OPERA"), /*#__PURE__*/createElement(LogoLeftSideRow, null, "HOUSE")), /*#__PURE__*/createElement(LogoRightSide, null, productName));
|
|
3832
3937
|
};
|
|
3833
3938
|
|
|
3834
|
-
var _templateObject$
|
|
3835
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
3939
|
+
var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7;
|
|
3940
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
3836
3941
|
var dark = _ref.dark;
|
|
3837
3942
|
return dark ? 'white' : 'errorstate';
|
|
3838
3943
|
});
|
|
3839
|
-
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$
|
|
3944
|
+
var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(\n --base-color-", "\n );\n cursor: ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n div {\n margin-left: -32px;\n }\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref2) {
|
|
3840
3945
|
var dark = _ref2.dark,
|
|
3841
3946
|
disabled = _ref2.disabled;
|
|
3842
3947
|
if (dark) return disabled ? 'lightgrey' : 'white';
|
|
@@ -3845,7 +3950,7 @@ var TickboxLabel$1 = /*#__PURE__*/styled.label(_templateObject2$f || (_templateO
|
|
|
3845
3950
|
var disabled = _ref3.disabled;
|
|
3846
3951
|
return disabled ? 'not-allowed' : 'pointer';
|
|
3847
3952
|
}, devices.mobileAndTablet);
|
|
3848
|
-
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$
|
|
3953
|
+
var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n outline: ", ";\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref4) {
|
|
3849
3954
|
var dark = _ref4.dark,
|
|
3850
3955
|
disabled = _ref4.disabled,
|
|
3851
3956
|
error = _ref4.error;
|
|
@@ -3861,7 +3966,7 @@ var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject3$9 || (_template
|
|
|
3861
3966
|
dark = _ref6.dark;
|
|
3862
3967
|
return dark && error ? '1px solid var(--base-color-errorstate)' : 'none';
|
|
3863
3968
|
}, devices.mobile);
|
|
3864
|
-
var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$
|
|
3969
|
+
var TickboxInput = /*#__PURE__*/styled.input(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n &:checked ~ ", " {\n background-color: var(\n --base-color-", "\n );\n & svg {\n display: block;\n path {\n fill: var(\n --base-color-", "\n );\n }\n }\n }\n"])), TickboxCheckmark, function (_ref7) {
|
|
3865
3970
|
var dark = _ref7.dark,
|
|
3866
3971
|
whiteBox = _ref7.whiteBox,
|
|
3867
3972
|
disabled = _ref7.disabled;
|
|
@@ -3953,9 +4058,9 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
3953
4058
|
}, error)));
|
|
3954
4059
|
};
|
|
3955
4060
|
|
|
3956
|
-
var _templateObject$
|
|
3957
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
3958
|
-
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
4061
|
+
var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$4, _templateObject6$2;
|
|
4062
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4063
|
+
var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
3959
4064
|
var error = _ref.error,
|
|
3960
4065
|
darkMode = _ref.darkMode,
|
|
3961
4066
|
disabled = _ref.disabled;
|
|
@@ -3978,7 +4083,7 @@ var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$
|
|
|
3978
4083
|
if (blackBox) return 'var(--base-color-white)';
|
|
3979
4084
|
return ' var(--base-color-black)';
|
|
3980
4085
|
});
|
|
3981
|
-
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$
|
|
4086
|
+
var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-left: 32px;\n input[type='checkbox'] {\n width: 1px;\n height: 1px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n z-index: 0;\n &:checked + ", " {\n background-color: ", ";\n }\n &:focus + ", " {\n outline: ", ";\n }\n }\n"])), Tickbox$1, function (_ref4) {
|
|
3982
4087
|
var blackBox = _ref4.blackBox,
|
|
3983
4088
|
darkMode = _ref4.darkMode;
|
|
3984
4089
|
if (darkMode) return 'var(--base-color-white)';
|
|
@@ -3989,8 +4094,8 @@ var TickboxLabel$2 = /*#__PURE__*/styled.label(_templateObject3$a || (_templateO
|
|
|
3989
4094
|
if (darkMode) return '4px solid var(--base-color-lemonchiffon)';
|
|
3990
4095
|
return '3px solid var(--base-color-lapislazuli)';
|
|
3991
4096
|
});
|
|
3992
|
-
var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$
|
|
3993
|
-
var TextLabel$
|
|
4097
|
+
var TickboxIcon = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n color: inherit;\n svg {\n font-size: 12px;\n width: 1em;\n height: 1em;\n fill: currentColor;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n input[type='checkbox']:checked + ", " & {\n display: block;\n }\n"])), Tickbox$1);
|
|
4098
|
+
var TextLabel$3 = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref6) {
|
|
3994
4099
|
var darkMode = _ref6.darkMode,
|
|
3995
4100
|
disabled = _ref6.disabled;
|
|
3996
4101
|
if (darkMode && disabled) return 'var(--base-color-lightgrey)';
|
|
@@ -3998,7 +4103,7 @@ var TextLabel$2 = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject
|
|
|
3998
4103
|
if (disabled) return 'var(--base-color-darkgrey)';
|
|
3999
4104
|
return 'var(--base-color-black)';
|
|
4000
4105
|
});
|
|
4001
|
-
var ErrorLabel$
|
|
4106
|
+
var ErrorLabel$3 = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref7) {
|
|
4002
4107
|
var darkMode = _ref7.darkMode;
|
|
4003
4108
|
if (darkMode) return 'var(--base-color-white)';
|
|
4004
4109
|
return 'var(--base-color-errorstate)';
|
|
@@ -4050,13 +4155,13 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4050
4155
|
blackBox: blackBox
|
|
4051
4156
|
}, /*#__PURE__*/React__default.createElement(TickboxIcon, null, /*#__PURE__*/React__default.createElement(Icon, {
|
|
4052
4157
|
iconName: "Tick"
|
|
4053
|
-
}))), /*#__PURE__*/React__default.createElement(TextLabel$
|
|
4158
|
+
}))), /*#__PURE__*/React__default.createElement(TextLabel$3, {
|
|
4054
4159
|
disabled: disabled,
|
|
4055
4160
|
darkMode: darkMode,
|
|
4056
4161
|
"data-testid": "tickbox-content"
|
|
4057
4162
|
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
4058
4163
|
level: 1
|
|
4059
|
-
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
4164
|
+
}, children))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$3, {
|
|
4060
4165
|
darkMode: darkMode,
|
|
4061
4166
|
"data-testid": "tickbox-error-label"
|
|
4062
4167
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -4064,18 +4169,18 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4064
4169
|
}, error)));
|
|
4065
4170
|
});
|
|
4066
4171
|
|
|
4067
|
-
var _templateObject$
|
|
4068
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4172
|
+
var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4173
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4069
4174
|
var color = _ref.color;
|
|
4070
4175
|
return color;
|
|
4071
4176
|
});
|
|
4072
|
-
var Line = /*#__PURE__*/styled.div(_templateObject2$
|
|
4177
|
+
var Line = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
|
|
4073
4178
|
var color = _ref2.color;
|
|
4074
4179
|
return color;
|
|
4075
4180
|
}, devices.mobileAndTablet);
|
|
4076
|
-
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4077
|
-
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4078
|
-
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$
|
|
4181
|
+
var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
|
|
4182
|
+
var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
|
|
4183
|
+
var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
|
|
4079
4184
|
var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
4080
4185
|
var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
4081
4186
|
var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
@@ -4173,8 +4278,8 @@ var Timer = function Timer(_ref) {
|
|
|
4173
4278
|
}));
|
|
4174
4279
|
};
|
|
4175
4280
|
|
|
4176
|
-
var _templateObject$
|
|
4177
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4281
|
+
var _templateObject$w;
|
|
4282
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
|
|
4178
4283
|
|
|
4179
4284
|
var TypeTags = function TypeTags(_ref) {
|
|
4180
4285
|
var list = _ref.list;
|
|
@@ -4916,12 +5021,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
4916
5021
|
}
|
|
4917
5022
|
});
|
|
4918
5023
|
|
|
4919
|
-
var _templateObject$
|
|
4920
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
4921
|
-
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
4922
|
-
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
4923
|
-
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
4924
|
-
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
5024
|
+
var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5025
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
|
|
5026
|
+
var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
5027
|
+
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5028
|
+
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
5029
|
+
var LeftWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
4925
5030
|
var VideoVolume = /*#__PURE__*/styled.input(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
|
|
4926
5031
|
var VideoMute = /*#__PURE__*/styled.button(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 17px;\n height: 17px;\n background: none;\n border: none;\n padding: 0;\n svg {\n width: 100%;\n height: 100%;\n }\n cursor: pointer;\n"])));
|
|
4927
5032
|
var thumbStyles = /*#__PURE__*/css(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n appearance: none;\n border: none;\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: #ffffff;\n border: none;\n transform: translateY(-25%);\n"])));
|
|
@@ -4990,6 +5095,16 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
4990
5095
|
video.loop = loop;
|
|
4991
5096
|
}
|
|
4992
5097
|
}, [loop]);
|
|
5098
|
+
useEffect(function () {
|
|
5099
|
+
var handleFullscreenChange = function handleFullscreenChange() {
|
|
5100
|
+
setIsFullscreen(!!document.fullscreenElement);
|
|
5101
|
+
};
|
|
5102
|
+
|
|
5103
|
+
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
5104
|
+
return function () {
|
|
5105
|
+
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
5106
|
+
};
|
|
5107
|
+
}, []);
|
|
4993
5108
|
var handleFullscreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
|
|
4994
5109
|
var videoContainer;
|
|
4995
5110
|
return runtime_1.wrap(function _callee$(_context) {
|
|
@@ -5124,13 +5239,13 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5124
5239
|
})));
|
|
5125
5240
|
};
|
|
5126
5241
|
|
|
5127
|
-
var _templateObject$
|
|
5128
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5129
|
-
var StepperError = /*#__PURE__*/styled.div(_templateObject2$
|
|
5242
|
+
var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7;
|
|
5243
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5244
|
+
var StepperError = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
5130
5245
|
var darkMode = _ref.darkMode;
|
|
5131
5246
|
return darkMode ? 'white' : 'errorstate';
|
|
5132
5247
|
});
|
|
5133
|
-
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$
|
|
5248
|
+
var StepperBox = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 154px;\n height: 48px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border: 1px solid\n var(\n --base-color-", "\n );\n background-color: var(--base-color-", ");\n ", ";\n\n * {\n color: var(--base-color-", ");\n word-break: unset;\n user-select: none;\n }\n\n path {\n fill: var(--base-color-", ") !important;\n }\n\n & > * {\n width: 51px;\n }\n"])), function (_ref2) {
|
|
5134
5249
|
var darkMode = _ref2.darkMode,
|
|
5135
5250
|
disabled = _ref2.disabled,
|
|
5136
5251
|
error = _ref2.error;
|
|
@@ -5152,11 +5267,11 @@ var StepperBox = /*#__PURE__*/styled.div(_templateObject3$d || (_templateObject3
|
|
|
5152
5267
|
var disabled = _ref6.disabled;
|
|
5153
5268
|
return disabled ? 'midgrey' : 'black';
|
|
5154
5269
|
});
|
|
5155
|
-
var StepperValue = /*#__PURE__*/styled.input(_templateObject4$
|
|
5270
|
+
var StepperValue = /*#__PURE__*/styled.input(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 51px;\n border: 0;\n text-align: center;\n font-family: var(--font-family-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n background-color: transparent;\n cursor: ", ";\n"])), function (_ref7) {
|
|
5156
5271
|
var disabled = _ref7.disabled;
|
|
5157
5272
|
return disabled ? 'not-allowed' : 'text';
|
|
5158
5273
|
});
|
|
5159
|
-
var StepperButton = /*#__PURE__*/styled.div(_templateObject5$
|
|
5274
|
+
var StepperButton = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n span {\n display: flex;\n justify-content: center;\n }\n\n svg {\n width: 40%;\n height: auto;\n }\n"])), function (_ref8) {
|
|
5160
5275
|
var disabled = _ref8.disabled;
|
|
5161
5276
|
return disabled ? 'not-allowed' : 'pointer';
|
|
5162
5277
|
});
|
|
@@ -5352,18 +5467,18 @@ var Component = function Component(_ref) {
|
|
|
5352
5467
|
}, error)));
|
|
5353
5468
|
};
|
|
5354
5469
|
|
|
5355
|
-
var _templateObject$
|
|
5356
|
-
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5470
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5471
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5357
5472
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5358
5473
|
return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--base-color-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
|
|
5359
5474
|
});
|
|
5360
|
-
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5361
|
-
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
5362
|
-
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$
|
|
5475
|
+
var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0.4;\n"])), zIndexes.searchOverlay);
|
|
5476
|
+
var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--base-color-white);\n height: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 80px;\n }\n"])), zIndexes.navigation, devices.mobile);
|
|
5477
|
+
var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n height: 100px;\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref2) {
|
|
5363
5478
|
var visible = _ref2.visible;
|
|
5364
5479
|
return visible ? 'visible' : 'hidden';
|
|
5365
5480
|
}, zIndexes.search, devices.mobile);
|
|
5366
|
-
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$
|
|
5481
|
+
var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n background-color: var(--base-color-white);\n border-top: 1px solid var(--base-color-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n height: 100px;\n\n @media ", " {\n height: 100%;\n top: 80px;\n }\n"])), function (_ref3) {
|
|
5367
5482
|
var visible = _ref3.visible;
|
|
5368
5483
|
return visible ? 'visible' : 'hidden';
|
|
5369
5484
|
}, zIndexes.search, devices.mobile);
|
|
@@ -5377,8 +5492,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
|
|
|
5377
5492
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5378
5493
|
var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
5379
5494
|
|
|
5380
|
-
var _templateObject$
|
|
5381
|
-
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5495
|
+
var _templateObject$A;
|
|
5496
|
+
var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
5382
5497
|
|
|
5383
5498
|
var Logo$1 = function Logo(_ref) {
|
|
5384
5499
|
var _ref$id = _ref.id,
|
|
@@ -5407,11 +5522,11 @@ var Logo$1 = function Logo(_ref) {
|
|
|
5407
5522
|
}))));
|
|
5408
5523
|
};
|
|
5409
5524
|
|
|
5410
|
-
var _templateObject$
|
|
5411
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5525
|
+
var _templateObject$B;
|
|
5526
|
+
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
5412
5527
|
|
|
5413
|
-
var _templateObject$
|
|
5414
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5528
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$g, _templateObject4$d;
|
|
5529
|
+
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5415
5530
|
var selected = _ref.selected,
|
|
5416
5531
|
colorPrimary = _ref.colorPrimary;
|
|
5417
5532
|
|
|
@@ -5439,9 +5554,9 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObj
|
|
|
5439
5554
|
|
|
5440
5555
|
return '';
|
|
5441
5556
|
});
|
|
5442
|
-
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
5443
|
-
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
5444
|
-
var BasketText = /*#__PURE__*/styled.a(_templateObject4$
|
|
5557
|
+
var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5558
|
+
var NumContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n\n & .basket-num {\n color: white;\n font-size: 10px;\n font-family: var(--font-family-navigation);\n }\n"])));
|
|
5559
|
+
var BasketText = /*#__PURE__*/styled.a(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n color: var(--base-color-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
|
|
5445
5560
|
|
|
5446
5561
|
var getSecondsUntil = function getSecondsUntil(expiryUnixTimestamp) {
|
|
5447
5562
|
if (!expiryUnixTimestamp) return 0;
|
|
@@ -5599,8 +5714,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
5599
5714
|
}, expiryTime ? basketText : text) : ''));
|
|
5600
5715
|
};
|
|
5601
5716
|
|
|
5602
|
-
var _templateObject$
|
|
5603
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5717
|
+
var _templateObject$D, _templateObject2$n;
|
|
5718
|
+
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
5604
5719
|
var selected = _ref.selected,
|
|
5605
5720
|
colorPrimary = _ref.colorPrimary;
|
|
5606
5721
|
|
|
@@ -5616,7 +5731,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObj
|
|
|
5616
5731
|
var colorPrimary = _ref3.colorPrimary;
|
|
5617
5732
|
return colorPrimary;
|
|
5618
5733
|
});
|
|
5619
|
-
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
5734
|
+
var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
|
|
5620
5735
|
|
|
5621
5736
|
var Search$1 = function Search(_ref) {
|
|
5622
5737
|
var _ref$selected = _ref.selected,
|
|
@@ -5892,23 +6007,23 @@ var NavTop = function NavTop(_ref) {
|
|
|
5892
6007
|
}));
|
|
5893
6008
|
};
|
|
5894
6009
|
|
|
5895
|
-
var _templateObject$
|
|
5896
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5897
|
-
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6010
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject4$e;
|
|
6011
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
6012
|
+
var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
5898
6013
|
if (props.showMenu) {
|
|
5899
6014
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
5900
6015
|
}
|
|
5901
6016
|
|
|
5902
6017
|
return "display: none;";
|
|
5903
6018
|
});
|
|
5904
|
-
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
6019
|
+
var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
5905
6020
|
var colorPrimary = _ref.colorPrimary;
|
|
5906
6021
|
return colorPrimary;
|
|
5907
6022
|
}, function (_ref2) {
|
|
5908
6023
|
var colorPrimary = _ref2.colorPrimary;
|
|
5909
6024
|
return colorPrimary;
|
|
5910
6025
|
}, devices.mobileAndTablet);
|
|
5911
|
-
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$
|
|
6026
|
+
var MenuItem = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n a {\n margin-left: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
5912
6027
|
|
|
5913
6028
|
var Tabs = function Tabs(_ref) {
|
|
5914
6029
|
var _ref$items = _ref.items,
|
|
@@ -6035,11 +6150,11 @@ var Tabs = function Tabs(_ref) {
|
|
|
6035
6150
|
}, "MENU"))));
|
|
6036
6151
|
};
|
|
6037
6152
|
|
|
6038
|
-
var _templateObject$
|
|
6039
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6040
|
-
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$
|
|
6041
|
-
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$
|
|
6042
|
-
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6153
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6154
|
+
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-transparent);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
6155
|
+
var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
6156
|
+
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
|
|
6157
|
+
var InputContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
6043
6158
|
var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
6044
6159
|
var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
6045
6160
|
|
|
@@ -6273,18 +6388,18 @@ var Navigation = function Navigation(_ref) {
|
|
|
6273
6388
|
})))));
|
|
6274
6389
|
};
|
|
6275
6390
|
|
|
6276
|
-
var _templateObject$
|
|
6277
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
6278
|
-
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6279
|
-
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$
|
|
6280
|
-
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$
|
|
6281
|
-
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$
|
|
6391
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$a, _templateObject6$7;
|
|
6392
|
+
var FooterSection = /*#__PURE__*/styled.section(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
6393
|
+
var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
6394
|
+
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
6395
|
+
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6396
|
+
var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
6282
6397
|
var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
6283
6398
|
|
|
6284
|
-
var _templateObject$
|
|
6285
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
6286
|
-
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$
|
|
6287
|
-
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$
|
|
6399
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$k;
|
|
6400
|
+
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
6401
|
+
var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
6402
|
+
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
6288
6403
|
|
|
6289
6404
|
var PolicyLinks = function PolicyLinks(_ref) {
|
|
6290
6405
|
var _ref$items = _ref.items,
|
|
@@ -6300,12 +6415,12 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6300
6415
|
}));
|
|
6301
6416
|
};
|
|
6302
6417
|
|
|
6303
|
-
var _templateObject$
|
|
6304
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6305
|
-
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$
|
|
6306
|
-
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6307
|
-
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$
|
|
6308
|
-
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
6418
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6419
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6420
|
+
var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
6421
|
+
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6422
|
+
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6423
|
+
var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
|
|
6309
6424
|
var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6310
6425
|
var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
|
|
6311
6426
|
var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
|
|
@@ -6372,15 +6487,15 @@ var Footer = function Footer(_ref) {
|
|
|
6372
6487
|
}, additionalInfo)))));
|
|
6373
6488
|
};
|
|
6374
6489
|
|
|
6375
|
-
var _templateObject$
|
|
6490
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$9;
|
|
6376
6491
|
var LIST_ITEM_GAP = 32;
|
|
6377
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6492
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6378
6493
|
var bottomBorder = _ref.bottomBorder;
|
|
6379
6494
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6380
6495
|
}, zIndexes.anchor);
|
|
6381
|
-
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
6382
|
-
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
6383
|
-
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$
|
|
6496
|
+
var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
|
|
6497
|
+
var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
6498
|
+
var TabsList = /*#__PURE__*/styled.ul(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0.48) 85%,\n rgba(235, 235, 235, 0.4) 99%,\n rgba(255, 255, 255, 0.39) 100%\n );\n }\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref2) {
|
|
6384
6499
|
var tabsOverflow = _ref2.tabsOverflow;
|
|
6385
6500
|
return tabsOverflow ? 'calc(100% - 74px)' : '100%';
|
|
6386
6501
|
}, LIST_ITEM_GAP, function (_ref3) {
|
|
@@ -6391,7 +6506,7 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject4$g || (_templateObject4$g
|
|
|
6391
6506
|
hasTwoArrows = _ref4.hasTwoArrows;
|
|
6392
6507
|
return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
|
|
6393
6508
|
});
|
|
6394
|
-
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6509
|
+
var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: var(--anchor-tabs-height);\n background-color: var(--base-color-white);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n"])), function (_ref5) {
|
|
6395
6510
|
var fullWidth = _ref5.fullWidth;
|
|
6396
6511
|
return fullWidth ? '74px' : '46px';
|
|
6397
6512
|
});
|
|
@@ -6638,17 +6753,17 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
6638
6753
|
})) : null) : null))));
|
|
6639
6754
|
};
|
|
6640
6755
|
|
|
6641
|
-
var _templateObject$
|
|
6642
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6756
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
6757
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6643
6758
|
var sticky = _ref.sticky;
|
|
6644
6759
|
return sticky ? 'sticky' : 'initial';
|
|
6645
6760
|
}, zIndexes.anchor);
|
|
6646
|
-
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
6647
|
-
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$
|
|
6761
|
+
var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
|
|
6762
|
+
var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
|
|
6648
6763
|
var title = _ref2.title;
|
|
6649
6764
|
return title ? 'row' : 'row-reverse';
|
|
6650
6765
|
}, devices.tablet, devices.mobile);
|
|
6651
|
-
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$
|
|
6766
|
+
var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
6652
6767
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
6653
6768
|
var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
6654
6769
|
var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
@@ -6699,15 +6814,15 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
6699
6814
|
}, message)));
|
|
6700
6815
|
};
|
|
6701
6816
|
|
|
6702
|
-
var _templateObject$
|
|
6703
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
6704
|
-
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
6705
|
-
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$
|
|
6817
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$o, _templateObject4$j, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
6818
|
+
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
6819
|
+
var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
6820
|
+
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
|
|
6706
6821
|
var theme = _ref.theme;
|
|
6707
6822
|
return theme.colors.primary;
|
|
6708
6823
|
}, Colors.White);
|
|
6709
|
-
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
6710
|
-
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
6824
|
+
var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
|
|
6825
|
+
var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
|
|
6711
6826
|
var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
|
|
6712
6827
|
var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
|
|
6713
6828
|
var LineThrough = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
|
|
@@ -6780,8 +6895,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
6780
6895
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
6781
6896
|
};
|
|
6782
6897
|
|
|
6783
|
-
var _templateObject$
|
|
6784
|
-
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
6898
|
+
var _templateObject$M;
|
|
6899
|
+
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
6785
6900
|
|
|
6786
6901
|
var UpsellCards = function UpsellCards(_ref) {
|
|
6787
6902
|
var upsellCards = _ref.upsellCards;
|
|
@@ -6799,20 +6914,20 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
6799
6914
|
}));
|
|
6800
6915
|
};
|
|
6801
6916
|
|
|
6802
|
-
var _templateObject$
|
|
6803
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
6917
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$p;
|
|
6918
|
+
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
|
|
6804
6919
|
var theme = _ref.theme;
|
|
6805
6920
|
return theme.colors.primary;
|
|
6806
6921
|
}, devices.mobile, devices.tablet);
|
|
6807
|
-
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6808
|
-
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6922
|
+
var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
|
|
6923
|
+
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
6809
6924
|
|
|
6810
|
-
var _templateObject$
|
|
6811
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6812
|
-
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
6813
|
-
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
6814
|
-
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$
|
|
6815
|
-
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$
|
|
6925
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$q, _templateObject4$k, _templateObject5$e;
|
|
6926
|
+
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
6927
|
+
var LineContainer = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
6928
|
+
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
|
|
6929
|
+
var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
|
|
6930
|
+
var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), devices.mobile);
|
|
6816
6931
|
|
|
6817
6932
|
var Accordion = function Accordion(_ref) {
|
|
6818
6933
|
var _ref$title = _ref.title,
|
|
@@ -6937,8 +7052,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
6937
7052
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
6938
7053
|
};
|
|
6939
7054
|
|
|
6940
|
-
var _templateObject$
|
|
6941
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7055
|
+
var _templateObject$P;
|
|
7056
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
6942
7057
|
|
|
6943
7058
|
var Accordions = function Accordions(_ref) {
|
|
6944
7059
|
var _ref$items = _ref.items,
|
|
@@ -6956,7 +7071,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
6956
7071
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
6957
7072
|
contentType: accordion.contentType,
|
|
6958
7073
|
displayLevel: accordion.displayLevel,
|
|
6959
|
-
semanticLevel: accordion.semanticLevel
|
|
7074
|
+
semanticLevel: accordion.semanticLevel,
|
|
7075
|
+
initOpen: accordion.initOpen
|
|
6960
7076
|
}, accordion.children);
|
|
6961
7077
|
}));
|
|
6962
7078
|
};
|
|
@@ -6970,13 +7086,13 @@ var Theme = function Theme(_ref) {
|
|
|
6970
7086
|
}, children);
|
|
6971
7087
|
};
|
|
6972
7088
|
|
|
6973
|
-
var _templateObject$
|
|
6974
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7089
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$r;
|
|
7090
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
6975
7091
|
var theme = _ref.theme;
|
|
6976
7092
|
return theme.colors.primary;
|
|
6977
7093
|
}, devices.mobile);
|
|
6978
|
-
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$
|
|
6979
|
-
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7094
|
+
var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: center;\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n @media ", " {\n align-items: flex-start;\n }\n"])), devices.mobile);
|
|
7095
|
+
var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-white);\n a {\n color: var(--base-color-white);\n text-decoration: underline;\n }\n"])));
|
|
6980
7096
|
|
|
6981
7097
|
var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
6982
7098
|
var title = _ref.title,
|
|
@@ -7013,8 +7129,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7013
7129
|
}))))));
|
|
7014
7130
|
};
|
|
7015
7131
|
|
|
7016
|
-
var _templateObject$
|
|
7017
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
7132
|
+
var _templateObject$R;
|
|
7133
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
7018
7134
|
var bgColor = _ref.bgColor,
|
|
7019
7135
|
theme = _ref.theme;
|
|
7020
7136
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7035,32 +7151,32 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7035
7151
|
}), children);
|
|
7036
7152
|
};
|
|
7037
7153
|
|
|
7038
|
-
var _templateObject$
|
|
7154
|
+
var _templateObject$S, _templateObject2$z, _templateObject3$s, _templateObject4$l, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
7039
7155
|
var LENGTH_LARGE_TEXT = 28;
|
|
7040
7156
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7041
7157
|
var LENGTH_TEXT_TABLET = 10;
|
|
7042
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7158
|
+
var CardContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
7043
7159
|
var isCardClickable = _ref.isCardClickable;
|
|
7044
7160
|
return isCardClickable ? 'pointer' : 'default';
|
|
7045
7161
|
}, function (_ref2) {
|
|
7046
7162
|
var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
|
|
7047
7163
|
return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
|
|
7048
7164
|
});
|
|
7049
|
-
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
7165
|
+
var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
|
|
7050
7166
|
var lineColor = _ref3.lineColor,
|
|
7051
7167
|
theme = _ref3.theme;
|
|
7052
7168
|
if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
|
|
7053
7169
|
return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
|
|
7054
7170
|
}, zIndexes.contentOverlay);
|
|
7055
|
-
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
7056
|
-
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7171
|
+
var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
|
|
7172
|
+
var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
|
|
7057
7173
|
var fullWidth = _ref4.fullWidth;
|
|
7058
7174
|
return fullWidth ? '0' : '20px';
|
|
7059
7175
|
}, function (_ref5) {
|
|
7060
7176
|
var fullWidth = _ref5.fullWidth;
|
|
7061
7177
|
return fullWidth ? '0' : '20px';
|
|
7062
7178
|
});
|
|
7063
|
-
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7179
|
+
var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7064
7180
|
var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
|
|
7065
7181
|
var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7066
7182
|
var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
|
|
@@ -7321,9 +7437,9 @@ var Card = function Card(_ref) {
|
|
|
7321
7437
|
dangerouslySetInnerHTML: {
|
|
7322
7438
|
__html: truncatedText
|
|
7323
7439
|
}
|
|
7324
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7440
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7325
7441
|
level: 1
|
|
7326
|
-
}, highlightText))
|
|
7442
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7327
7443
|
fullWidth: fullWidth
|
|
7328
7444
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7329
7445
|
ref: node,
|
|
@@ -7337,9 +7453,9 @@ var Card = function Card(_ref) {
|
|
|
7337
7453
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7338
7454
|
};
|
|
7339
7455
|
|
|
7340
|
-
var _templateObject$
|
|
7341
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7342
|
-
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$
|
|
7456
|
+
var _templateObject$T, _templateObject2$A;
|
|
7457
|
+
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
7458
|
+
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7343
7459
|
|
|
7344
7460
|
var Cards = function Cards(_ref) {
|
|
7345
7461
|
var cards = _ref.cards,
|
|
@@ -7384,18 +7500,18 @@ var Cards = function Cards(_ref) {
|
|
|
7384
7500
|
}));
|
|
7385
7501
|
};
|
|
7386
7502
|
|
|
7387
|
-
var _templateObject$
|
|
7388
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7389
|
-
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
7503
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g;
|
|
7504
|
+
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
7505
|
+
var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
7390
7506
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7391
7507
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7392
7508
|
}, function (_ref2) {
|
|
7393
7509
|
var hideTopBorder = _ref2.hideTopBorder;
|
|
7394
7510
|
return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
7395
7511
|
}, devices.mobileAndTablet);
|
|
7396
|
-
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$
|
|
7397
|
-
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$
|
|
7398
|
-
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7512
|
+
var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
|
|
7513
|
+
var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
|
|
7514
|
+
var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
|
|
7399
7515
|
|
|
7400
7516
|
var divideAddressString = function divideAddressString(address) {
|
|
7401
7517
|
return address.split(',').map(function (chunk, i) {
|
|
@@ -7453,16 +7569,16 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7453
7569
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7454
7570
|
};
|
|
7455
7571
|
|
|
7456
|
-
var _templateObject$
|
|
7457
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7458
|
-
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$
|
|
7572
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$8;
|
|
7573
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7574
|
+
var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7459
7575
|
return props.clickable ? 'pointer' : 'default';
|
|
7460
7576
|
}, devices.mobile);
|
|
7461
|
-
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7462
|
-
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7577
|
+
var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
|
|
7578
|
+
var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
|
|
7463
7579
|
return props.showImage ? 2 : '1 / span 4';
|
|
7464
7580
|
}, devices.mobile);
|
|
7465
|
-
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7581
|
+
var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
|
|
7466
7582
|
var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
|
|
7467
7583
|
var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
|
|
7468
7584
|
return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
|
|
@@ -7536,21 +7652,21 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7536
7652
|
}), link.text)));
|
|
7537
7653
|
};
|
|
7538
7654
|
|
|
7539
|
-
var _templateObject$
|
|
7540
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
7655
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$i;
|
|
7656
|
+
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7541
7657
|
var imageToLeft = _ref.imageToLeft;
|
|
7542
7658
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7543
7659
|
}, devices.mobile);
|
|
7544
|
-
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7660
|
+
var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
|
|
7545
7661
|
var imageToLeft = _ref2.imageToLeft;
|
|
7546
7662
|
return imageToLeft ? 'left' : 'right';
|
|
7547
7663
|
}, devices.mobile);
|
|
7548
|
-
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7664
|
+
var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
|
|
7549
7665
|
var imageToLeft = _ref3.imageToLeft;
|
|
7550
7666
|
return imageToLeft ? 'right' : 'left';
|
|
7551
7667
|
}, devices.mobile);
|
|
7552
|
-
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$
|
|
7553
|
-
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$
|
|
7668
|
+
var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
7669
|
+
var EditorialText = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
|
|
7554
7670
|
|
|
7555
7671
|
var Editorial = function Editorial(_ref) {
|
|
7556
7672
|
var _ref$imagePosition = _ref.imagePosition,
|
|
@@ -7614,10 +7730,10 @@ var BackgroundColour;
|
|
|
7614
7730
|
BackgroundColour["White"] = "white";
|
|
7615
7731
|
})(BackgroundColour || (BackgroundColour = {}));
|
|
7616
7732
|
|
|
7617
|
-
var _templateObject$
|
|
7618
|
-
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$
|
|
7619
|
-
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$
|
|
7620
|
-
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$
|
|
7733
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p;
|
|
7734
|
+
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
7735
|
+
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
7736
|
+
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
7621
7737
|
if (!props.infoThemed) {
|
|
7622
7738
|
return;
|
|
7623
7739
|
} else {
|
|
@@ -7628,7 +7744,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_template
|
|
|
7628
7744
|
}
|
|
7629
7745
|
}
|
|
7630
7746
|
});
|
|
7631
|
-
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
7747
|
+
var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
|
|
7632
7748
|
return props.background !== BackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
|
|
7633
7749
|
}, function (props) {
|
|
7634
7750
|
return "var(--base-color-" + props.background + ")";
|
|
@@ -7741,24 +7857,24 @@ var Information = function Information(_ref) {
|
|
|
7741
7857
|
}))));
|
|
7742
7858
|
};
|
|
7743
7859
|
|
|
7744
|
-
var _templateObject$
|
|
7745
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7860
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
|
|
7861
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
7746
7862
|
var theme = _ref.theme;
|
|
7747
7863
|
return theme.colors.primary;
|
|
7748
7864
|
}, function (_ref2) {
|
|
7749
7865
|
var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
|
|
7750
7866
|
return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
|
|
7751
7867
|
}, devices.mobile);
|
|
7752
|
-
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
7753
|
-
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
7868
|
+
var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
|
|
7869
|
+
var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
|
|
7754
7870
|
var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
|
|
7755
7871
|
return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
|
|
7756
7872
|
}, devices.mobile);
|
|
7757
|
-
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7873
|
+
var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 36px;\n\n ", ";\n\n @media ", " {\n & {\n height: 30px;\n }\n }\n"])), function (_ref4) {
|
|
7758
7874
|
var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
|
|
7759
7875
|
return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
|
|
7760
7876
|
}, devices.mobile);
|
|
7761
|
-
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
7877
|
+
var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
|
|
7762
7878
|
var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
|
|
7763
7879
|
var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
7764
7880
|
var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
@@ -7769,14 +7885,20 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7769
7885
|
link = _ref.link,
|
|
7770
7886
|
_ref$sponsor = _ref.sponsor,
|
|
7771
7887
|
sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
|
|
7772
|
-
children = _ref.children
|
|
7888
|
+
children = _ref.children,
|
|
7889
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7890
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
|
|
7891
|
+
_ref$copyCharLimit = _ref.copyCharLimit,
|
|
7892
|
+
copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
|
|
7893
|
+
_ref$titleCharLimit = _ref.titleCharLimit,
|
|
7894
|
+
titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
|
|
7773
7895
|
|
|
7774
7896
|
var _ref2 = link || {},
|
|
7775
7897
|
linkText = _ref2.text,
|
|
7776
7898
|
restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
7777
7899
|
|
|
7778
|
-
var truncatedText = text == null ? void 0 : text.substring(0,
|
|
7779
|
-
var truncatedTitle = title && title.substring(0,
|
|
7900
|
+
var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
|
|
7901
|
+
var truncatedTitle = title && title.substring(0, titleCharLimit);
|
|
7780
7902
|
var isTitleUnAvailable = !title;
|
|
7781
7903
|
return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
|
|
7782
7904
|
"data-testid": "page-heading-wrapper",
|
|
@@ -7787,7 +7909,8 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
7787
7909
|
}, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
|
|
7788
7910
|
isPageHeadingWithoutTitle: isTitleUnAvailable
|
|
7789
7911
|
}, children) : null, !isTitleUnAvailable && /*#__PURE__*/React__default.createElement(Header, {
|
|
7790
|
-
level: 2
|
|
7912
|
+
level: 2,
|
|
7913
|
+
semanticLevel: semanticLevel
|
|
7791
7914
|
}, truncatedTitle)), text ? /*#__PURE__*/React__default.createElement(TextWrapper, {
|
|
7792
7915
|
"data-testid": "page-heading-text"
|
|
7793
7916
|
}, /*#__PURE__*/React__default.createElement(PageHeadingText, {
|
|
@@ -7833,12 +7956,12 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
7833
7956
|
}), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
|
|
7834
7957
|
};
|
|
7835
7958
|
|
|
7836
|
-
var _templateObject$
|
|
7837
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7838
|
-
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
7839
|
-
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$
|
|
7840
|
-
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
7841
|
-
var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
7959
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
|
|
7960
|
+
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
7961
|
+
var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
7962
|
+
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
7963
|
+
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
|
|
7964
|
+
var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
|
|
7842
7965
|
var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
7843
7966
|
var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
7844
7967
|
var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
@@ -7854,7 +7977,9 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7854
7977
|
bgUrlDesktop = _ref.bgUrlDesktop,
|
|
7855
7978
|
bgUrlDevice = _ref.bgUrlDevice,
|
|
7856
7979
|
_ref$bgImageAltText = _ref.bgImageAltText,
|
|
7857
|
-
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText
|
|
7980
|
+
bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
|
|
7981
|
+
_ref$semanticLevel = _ref.semanticLevel,
|
|
7982
|
+
semanticLevel = _ref$semanticLevel === void 0 ? 3 : _ref$semanticLevel;
|
|
7858
7983
|
var truncatedText = text && text.substring(0, 75);
|
|
7859
7984
|
|
|
7860
7985
|
var _ref2 = link || {},
|
|
@@ -7890,7 +8015,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7890
8015
|
}, children) : null, text ? /*#__PURE__*/React__default.createElement(TextWrapper$1, {
|
|
7891
8016
|
"data-testid": "impact-text"
|
|
7892
8017
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
7893
|
-
level: 3
|
|
8018
|
+
level: 3,
|
|
8019
|
+
semanticLevel: semanticLevel
|
|
7894
8020
|
}, truncatedText)) : null, link ? /*#__PURE__*/React__default.createElement(ButtonWrapper$2, {
|
|
7895
8021
|
"data-testid": "impact-link"
|
|
7896
8022
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null), scrollHref ? /*#__PURE__*/React__default.createElement(ScrollDownWrapper, {
|
|
@@ -7904,21 +8030,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
7904
8030
|
}, "Scroll Down")) : null);
|
|
7905
8031
|
};
|
|
7906
8032
|
|
|
7907
|
-
var _templateObject$
|
|
7908
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8033
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject4$s, _templateObject5$l;
|
|
8034
|
+
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
7909
8035
|
var color = _ref.color;
|
|
7910
8036
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
7911
8037
|
}, devices.mobileAndTablet);
|
|
7912
|
-
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$
|
|
8038
|
+
var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
|
|
7913
8039
|
var hasImage = _ref2.hasImage;
|
|
7914
8040
|
return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
|
|
7915
8041
|
}, devices.mobileAndTablet, function (_ref3) {
|
|
7916
8042
|
var hasImage = _ref3.hasImage;
|
|
7917
8043
|
return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
|
|
7918
8044
|
});
|
|
7919
|
-
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$
|
|
7920
|
-
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
7921
|
-
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8045
|
+
var RightPanel = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
|
|
8046
|
+
var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
|
|
8047
|
+
var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
|
|
7922
8048
|
|
|
7923
8049
|
var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
7924
8050
|
var _image$src, _image$alt;
|
|
@@ -7949,8 +8075,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
7949
8075
|
}))));
|
|
7950
8076
|
};
|
|
7951
8077
|
|
|
7952
|
-
var _templateObject
|
|
7953
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8078
|
+
var _templateObject$$;
|
|
8079
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
7954
8080
|
|
|
7955
8081
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
7956
8082
|
var link = _ref.link,
|
|
@@ -7968,11 +8094,11 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
7968
8094
|
}), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
|
|
7969
8095
|
};
|
|
7970
8096
|
|
|
7971
|
-
var _templateObject$
|
|
7972
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
7973
|
-
var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$
|
|
7974
|
-
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
7975
|
-
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8097
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8098
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8099
|
+
var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
|
|
8100
|
+
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8101
|
+
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
|
|
7976
8102
|
var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
|
|
7977
8103
|
var invert = _ref.invert,
|
|
7978
8104
|
theme = _ref.theme;
|
|
@@ -8103,7 +8229,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8103
8229
|
var isIOS = function isIOS() {
|
|
8104
8230
|
try {
|
|
8105
8231
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8106
|
-
if (typeof navigator === undefined) return false;
|
|
8232
|
+
if (typeof navigator === 'undefined') return false;
|
|
8107
8233
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8108
8234
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8109
8235
|
} catch (e) {
|
|
@@ -8119,7 +8245,7 @@ var useIOS = function useIOS() {
|
|
|
8119
8245
|
setIOS = _useState[1];
|
|
8120
8246
|
|
|
8121
8247
|
useEffect(function () {
|
|
8122
|
-
if (typeof navigator === undefined) return;
|
|
8248
|
+
if (typeof navigator === 'undefined') return;
|
|
8123
8249
|
setIOS(isIOS());
|
|
8124
8250
|
}, []);
|
|
8125
8251
|
return IOS;
|
|
@@ -8258,7 +8384,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8258
8384
|
_ref4$brandingStyle = _ref4.brandingStyle,
|
|
8259
8385
|
brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
|
|
8260
8386
|
brandingText = _ref4.brandingText,
|
|
8261
|
-
brandingLink = _ref4.brandingLink
|
|
8387
|
+
brandingLink = _ref4.brandingLink,
|
|
8388
|
+
_ref4$showCopy = _ref4.showCopy,
|
|
8389
|
+
showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
|
|
8390
|
+
_ref4$semanticLevel = _ref4.semanticLevel,
|
|
8391
|
+
semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
|
|
8262
8392
|
|
|
8263
8393
|
var _ref5 = link || {},
|
|
8264
8394
|
linkText = _ref5.text,
|
|
@@ -8284,7 +8414,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8284
8414
|
})) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
|
|
8285
8415
|
video: video,
|
|
8286
8416
|
poster: poster
|
|
8287
|
-
})), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8417
|
+
})), showCopy && /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
|
|
8288
8418
|
className: "page-heading-compact__background",
|
|
8289
8419
|
invert: invert
|
|
8290
8420
|
}, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
|
|
@@ -8294,22 +8424,22 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8294
8424
|
invert: invert
|
|
8295
8425
|
}), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8296
8426
|
level: titleSize,
|
|
8297
|
-
semanticLevel:
|
|
8427
|
+
semanticLevel: semanticLevel
|
|
8298
8428
|
}, title && truncate(title, 40))), link && /*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
|
|
8299
8429
|
invert: invert,
|
|
8300
8430
|
className: "page-heading-compact__button"
|
|
8301
8431
|
}), linkText))));
|
|
8302
8432
|
};
|
|
8303
8433
|
|
|
8304
|
-
var _templateObject
|
|
8305
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject
|
|
8306
|
-
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$
|
|
8434
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t;
|
|
8435
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8436
|
+
var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
|
|
8307
8437
|
|
|
8308
|
-
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$
|
|
8438
|
+
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
8309
8439
|
var active = _ref.active;
|
|
8310
8440
|
return active === 'true' && " \n color: var(--base-color-core);\n ";
|
|
8311
8441
|
});
|
|
8312
|
-
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$
|
|
8442
|
+
var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
|
|
8313
8443
|
|
|
8314
8444
|
var reducePages = function reducePages(pages, currentPage) {
|
|
8315
8445
|
// If there are less than 6 pages, return all pages
|
|
@@ -8378,12 +8508,12 @@ var Pagination = function Pagination(_ref) {
|
|
|
8378
8508
|
}))));
|
|
8379
8509
|
};
|
|
8380
8510
|
|
|
8381
|
-
var _templateObject$
|
|
8382
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8383
|
-
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8384
|
-
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8385
|
-
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
8386
|
-
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$
|
|
8511
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$n, _templateObject6$h;
|
|
8512
|
+
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8513
|
+
var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
8514
|
+
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8515
|
+
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
8516
|
+
var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
|
|
8387
8517
|
var PersonLink = /*#__PURE__*/styled.a(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
|
|
8388
8518
|
|
|
8389
8519
|
var Person = function Person(_ref) {
|
|
@@ -8435,11 +8565,11 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8435
8565
|
}));
|
|
8436
8566
|
};
|
|
8437
8567
|
|
|
8438
|
-
var _templateObject$
|
|
8439
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8440
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$
|
|
8441
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8442
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8568
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v;
|
|
8569
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8570
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
8571
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
8572
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8443
8573
|
|
|
8444
8574
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8445
8575
|
return array.reduce(function (acc, item) {
|
|
@@ -8450,12 +8580,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8450
8580
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8451
8581
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8452
8582
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8453
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8583
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8584
|
+
key: index
|
|
8585
|
+
}, title));
|
|
8454
8586
|
} else if (index > 0) {
|
|
8455
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8587
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8588
|
+
key: index
|
|
8589
|
+
}, ", ", title);
|
|
8456
8590
|
}
|
|
8457
8591
|
|
|
8458
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8592
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8593
|
+
key: index
|
|
8594
|
+
}, title);
|
|
8459
8595
|
}));
|
|
8460
8596
|
};
|
|
8461
8597
|
|
|
@@ -8507,14 +8643,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8507
8643
|
}));
|
|
8508
8644
|
};
|
|
8509
8645
|
|
|
8510
|
-
var _templateObject$
|
|
8646
|
+
var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8511
8647
|
var LENGTH_TEXT = 28;
|
|
8512
8648
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8513
8649
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8514
8650
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8515
8651
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8516
8652
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8517
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8653
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8518
8654
|
var imageToLeft = _ref.imageToLeft;
|
|
8519
8655
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8520
8656
|
}, devices.tablet, function (_ref2) {
|
|
@@ -8524,8 +8660,8 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templa
|
|
|
8524
8660
|
var asCard = _ref3.asCard;
|
|
8525
8661
|
return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
|
|
8526
8662
|
});
|
|
8527
|
-
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$
|
|
8528
|
-
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$
|
|
8663
|
+
var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
8664
|
+
var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref4) {
|
|
8529
8665
|
var theme = _ref4.theme;
|
|
8530
8666
|
return theme.colors.black;
|
|
8531
8667
|
}, function (_ref5) {
|
|
@@ -8535,7 +8671,7 @@ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$D || (_template
|
|
|
8535
8671
|
var theme = _ref6.theme;
|
|
8536
8672
|
return theme.colors.primary;
|
|
8537
8673
|
});
|
|
8538
|
-
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$
|
|
8674
|
+
var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref7) {
|
|
8539
8675
|
var hasTextLinks = _ref7.hasTextLinks;
|
|
8540
8676
|
return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
|
|
8541
8677
|
}, function (_ref8) {
|
|
@@ -8563,7 +8699,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$v || (_templat
|
|
|
8563
8699
|
|
|
8564
8700
|
return '';
|
|
8565
8701
|
});
|
|
8566
|
-
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$
|
|
8702
|
+
var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref10) {
|
|
8567
8703
|
var marginBottom = _ref10.marginBottom;
|
|
8568
8704
|
return marginBottom + "px";
|
|
8569
8705
|
});
|
|
@@ -8785,26 +8921,26 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
8785
8921
|
}))));
|
|
8786
8922
|
};
|
|
8787
8923
|
|
|
8788
|
-
var _templateObject$
|
|
8924
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$F, _templateObject4$x, _templateObject5$p, _templateObject6$j, _templateObject7$d;
|
|
8789
8925
|
var LENGTH_TEXT$2 = 28;
|
|
8790
8926
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
8791
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8927
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
8792
8928
|
var imageToLeft = _ref.imageToLeft;
|
|
8793
8929
|
return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
|
|
8794
8930
|
}, devices.tablet, function (_ref2) {
|
|
8795
8931
|
var imageToLeft = _ref2.imageToLeft;
|
|
8796
8932
|
return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
|
|
8797
8933
|
}, devices.mobile);
|
|
8798
|
-
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8934
|
+
var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
|
|
8799
8935
|
var imageToLeft = _ref3.imageToLeft;
|
|
8800
8936
|
return imageToLeft ? 'left' : 'right';
|
|
8801
8937
|
}, devices.mobile);
|
|
8802
|
-
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$
|
|
8938
|
+
var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
|
|
8803
8939
|
var imageToLeft = _ref4.imageToLeft;
|
|
8804
8940
|
return imageToLeft ? 'right' : 'left';
|
|
8805
8941
|
}, devices.mobile);
|
|
8806
|
-
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$
|
|
8807
|
-
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$
|
|
8942
|
+
var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
|
|
8943
|
+
var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
|
|
8808
8944
|
var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
|
|
8809
8945
|
var theme = _ref5.theme;
|
|
8810
8946
|
return theme.colors.black;
|
|
@@ -8841,8 +8977,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
|
|
|
8841
8977
|
return '';
|
|
8842
8978
|
});
|
|
8843
8979
|
|
|
8844
|
-
var _templateObject$
|
|
8845
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8980
|
+
var _templateObject$16;
|
|
8981
|
+
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\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) {
|
|
8846
8982
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8847
8983
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8848
8984
|
return aspectRatio;
|
|
@@ -8854,6 +8990,10 @@ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObj
|
|
|
8854
8990
|
var _ref3$aspectRatio = _ref3.aspectRatio,
|
|
8855
8991
|
aspectRatio = _ref3$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref3$aspectRatio;
|
|
8856
8992
|
return AspectRatioLegacy[aspectRatio];
|
|
8993
|
+
}, function (_ref4) {
|
|
8994
|
+
var _ref4$aspectRatio = _ref4.aspectRatio,
|
|
8995
|
+
aspectRatio = _ref4$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref4$aspectRatio;
|
|
8996
|
+
return aspectRatio;
|
|
8857
8997
|
});
|
|
8858
8998
|
|
|
8859
8999
|
var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
@@ -8870,17 +9010,50 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
|
|
|
8870
9010
|
return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
|
|
8871
9011
|
};
|
|
8872
9012
|
|
|
9013
|
+
/**
|
|
9014
|
+
* Generates a random string in the format XXX-XXX.
|
|
9015
|
+
* Does not meet UUID standards.
|
|
9016
|
+
* To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
|
|
9017
|
+
*
|
|
9018
|
+
* @return {string} A random string in the format XXX-XXX.
|
|
9019
|
+
*/
|
|
9020
|
+
var generateDomElementId = function generateDomElementId() {
|
|
9021
|
+
var randomPart = Math.floor(100 + Math.random() * 900).toString();
|
|
9022
|
+
var datePart = Date.now().toString().slice(-3);
|
|
9023
|
+
return randomPart + "-" + datePart;
|
|
9024
|
+
};
|
|
9025
|
+
|
|
8873
9026
|
var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
8874
9027
|
var video = _ref.video,
|
|
8875
9028
|
settings = _ref.settings;
|
|
8876
|
-
var
|
|
8877
|
-
autoPlay = settings.autoPlay;
|
|
9029
|
+
var videoRef = useRef(null);
|
|
8878
9030
|
|
|
8879
9031
|
var _useState = useState(AspectRatio['16:9']),
|
|
8880
9032
|
aspectRatio = _useState[0],
|
|
8881
9033
|
setAspectRatio = _useState[1];
|
|
8882
9034
|
|
|
8883
|
-
var
|
|
9035
|
+
var _React$useState = React__default.useState(false),
|
|
9036
|
+
isVideoReady = _React$useState[0],
|
|
9037
|
+
setIsVideoReady = _React$useState[1];
|
|
9038
|
+
|
|
9039
|
+
var muted = settings.muted,
|
|
9040
|
+
autoPlay = settings.autoPlay;
|
|
9041
|
+
React__default.useEffect(function () {
|
|
9042
|
+
var changeVideoReadiness = function changeVideoReadiness() {
|
|
9043
|
+
setIsVideoReady(true);
|
|
9044
|
+
};
|
|
9045
|
+
|
|
9046
|
+
if (videoRef.current) {
|
|
9047
|
+
videoRef.current.addEventListener('canplay', changeVideoReadiness);
|
|
9048
|
+
return function () {
|
|
9049
|
+
var _videoRef$current;
|
|
9050
|
+
|
|
9051
|
+
return (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.removeEventListener('canplay', changeVideoReadiness);
|
|
9052
|
+
};
|
|
9053
|
+
}
|
|
9054
|
+
|
|
9055
|
+
return undefined;
|
|
9056
|
+
}, []);
|
|
8884
9057
|
|
|
8885
9058
|
var handleMetadataLoaded = function handleMetadataLoaded() {
|
|
8886
9059
|
if (videoRef.current) {
|
|
@@ -8889,18 +9062,24 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8889
9062
|
}
|
|
8890
9063
|
};
|
|
8891
9064
|
|
|
8892
|
-
var
|
|
9065
|
+
var videoElementId = useMemo(function () {
|
|
9066
|
+
return "video-id-" + generateDomElementId();
|
|
9067
|
+
}, []);
|
|
9068
|
+
var clonedVideo = /*#__PURE__*/cloneElement(video, _extends({
|
|
9069
|
+
playsInline: true
|
|
9070
|
+
}, muted ? {
|
|
8893
9071
|
muted: true
|
|
8894
9072
|
} : {}, autoPlay && muted ? {
|
|
8895
9073
|
autoPlay: true
|
|
8896
9074
|
} : {}, {
|
|
8897
9075
|
height: '100%',
|
|
8898
9076
|
width: '100%',
|
|
8899
|
-
onLoadedMetadata: handleMetadataLoaded
|
|
9077
|
+
onLoadedMetadata: handleMetadataLoaded,
|
|
9078
|
+
id: videoElementId
|
|
8900
9079
|
}, {
|
|
9080
|
+
poster: autoPlay && isVideoReady ? undefined : video.props.poster,
|
|
8901
9081
|
ref: videoRef
|
|
8902
9082
|
}));
|
|
8903
|
-
var videoElementId = clonedVideo.props.id;
|
|
8904
9083
|
var videoContainerId = "video-container-for-" + videoElementId;
|
|
8905
9084
|
|
|
8906
9085
|
var videoControlsProps = _extends({}, settings, {
|
|
@@ -8908,14 +9087,12 @@ var VideoWithControls$1 = function VideoWithControls(_ref) {
|
|
|
8908
9087
|
videoContainerId: videoContainerId
|
|
8909
9088
|
});
|
|
8910
9089
|
|
|
8911
|
-
|
|
8912
|
-
setAspectRatio(AspectRatio['16:9']);
|
|
8913
|
-
}, [video.props.src]);
|
|
9090
|
+
var showVideoControls = autoPlay ? isVideoReady : true;
|
|
8914
9091
|
return /*#__PURE__*/React__default.createElement(VideoContainer, {
|
|
8915
9092
|
aspectRatio: aspectRatio,
|
|
8916
9093
|
id: videoContainerId,
|
|
8917
|
-
"data-testid":
|
|
8918
|
-
}, clonedVideo, /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
9094
|
+
"data-testid": 'video-container'
|
|
9095
|
+
}, clonedVideo, showVideoControls && /*#__PURE__*/React__default.createElement(VideoControls, Object.assign({}, videoControlsProps)));
|
|
8919
9096
|
};
|
|
8920
9097
|
|
|
8921
9098
|
var PromoChild = function PromoChild(_ref) {
|
|
@@ -8949,7 +9126,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8949
9126
|
text = _ref.text,
|
|
8950
9127
|
links = _ref.links,
|
|
8951
9128
|
children = _ref.children,
|
|
8952
|
-
videoSettings = _ref.videoSettings
|
|
9129
|
+
videoSettings = _ref.videoSettings,
|
|
9130
|
+
titleSemanticLevel = _ref.titleSemanticLevel;
|
|
8953
9131
|
|
|
8954
9132
|
var truncate = function truncate(str, n) {
|
|
8955
9133
|
return str.length >= n ? str.substr(0, n) : str;
|
|
@@ -8990,7 +9168,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
8990
9168
|
"data-testid": "content-wrapper",
|
|
8991
9169
|
imageToLeft: imageToLeft
|
|
8992
9170
|
}, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
|
|
8993
|
-
level: titleLevel
|
|
9171
|
+
level: titleLevel,
|
|
9172
|
+
semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
|
|
8994
9173
|
}, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
|
|
8995
9174
|
dangerouslySetInnerHTML: {
|
|
8996
9175
|
__html: text
|
|
@@ -9002,8 +9181,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9002
9181
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9003
9182
|
};
|
|
9004
9183
|
|
|
9005
|
-
var _templateObject$
|
|
9006
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9184
|
+
var _templateObject$17;
|
|
9185
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9007
9186
|
|
|
9008
9187
|
/**
|
|
9009
9188
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9061,9 +9240,9 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9061
9240
|
})));
|
|
9062
9241
|
};
|
|
9063
9242
|
|
|
9064
|
-
var _templateObject$
|
|
9065
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9066
|
-
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9243
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$G;
|
|
9244
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9245
|
+
var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9067
9246
|
var horizontalMode = _ref.horizontalMode;
|
|
9068
9247
|
if (horizontalMode) return 'row';
|
|
9069
9248
|
return 'column';
|
|
@@ -9071,7 +9250,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObjec
|
|
|
9071
9250
|
var gap = _ref2.gap;
|
|
9072
9251
|
return gap + "px";
|
|
9073
9252
|
});
|
|
9074
|
-
var ErrorLabel$
|
|
9253
|
+
var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
|
|
9075
9254
|
var darkMode = _ref3.darkMode;
|
|
9076
9255
|
if (darkMode) return 'var(--base-color-white)';
|
|
9077
9256
|
return 'var(--base-color-errorstate)';
|
|
@@ -9143,7 +9322,7 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9143
9322
|
error: error !== undefined ? '' : undefined,
|
|
9144
9323
|
onChange: changeHandler
|
|
9145
9324
|
}, radio.content);
|
|
9146
|
-
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9325
|
+
})), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
|
|
9147
9326
|
darkMode: darkMode,
|
|
9148
9327
|
"data-testid": "radio-group-error-label"
|
|
9149
9328
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9151,10 +9330,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9151
9330
|
}, error)));
|
|
9152
9331
|
};
|
|
9153
9332
|
|
|
9154
|
-
var _templateObject$
|
|
9155
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9156
|
-
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9157
|
-
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$
|
|
9333
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$H;
|
|
9334
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9335
|
+
var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9336
|
+
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9158
9337
|
|
|
9159
9338
|
var StatusBanner = function StatusBanner(_ref) {
|
|
9160
9339
|
var statusText = _ref.statusText,
|
|
@@ -9216,14 +9395,15 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9216
9395
|
})))));
|
|
9217
9396
|
};
|
|
9218
9397
|
|
|
9219
|
-
var _templateObject$
|
|
9220
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9398
|
+
var _templateObject$1a;
|
|
9399
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9221
9400
|
|
|
9222
9401
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9223
9402
|
var title = _ref.title,
|
|
9224
9403
|
_ref$size = _ref.size,
|
|
9225
9404
|
size = _ref$size === void 0 ? 'small' : _ref$size,
|
|
9226
|
-
description = _ref.description
|
|
9405
|
+
description = _ref.description,
|
|
9406
|
+
semanticLevel = _ref.semanticLevel;
|
|
9227
9407
|
var headingLevel = size === 'large' ? 1 : 2;
|
|
9228
9408
|
return /*#__PURE__*/React__default.createElement(SectionTitleWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9229
9409
|
columnStartDesktop: 3,
|
|
@@ -9231,7 +9411,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9231
9411
|
columnStartDevice: 2,
|
|
9232
9412
|
columnSpanDevice: 12
|
|
9233
9413
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
9234
|
-
level: headingLevel
|
|
9414
|
+
level: headingLevel,
|
|
9415
|
+
semanticLevel: semanticLevel != null ? semanticLevel : headingLevel
|
|
9235
9416
|
}, title)), description && /*#__PURE__*/React__default.createElement(GridItem, {
|
|
9236
9417
|
columnStartDesktop: 3,
|
|
9237
9418
|
columnSpanDesktop: 8,
|
|
@@ -9243,8 +9424,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9243
9424
|
}, description))));
|
|
9244
9425
|
};
|
|
9245
9426
|
|
|
9246
|
-
var _templateObject$
|
|
9247
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
9427
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9428
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9248
9429
|
var theme = _ref.theme;
|
|
9249
9430
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9250
9431
|
}, function (_ref2) {
|
|
@@ -9254,12 +9435,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /
|
|
|
9254
9435
|
var theme = _ref3.theme;
|
|
9255
9436
|
return theme.colors.lightgrey;
|
|
9256
9437
|
});
|
|
9257
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
9438
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
9258
9439
|
var theme = _ref4.theme;
|
|
9259
9440
|
return theme.colors.darkgrey;
|
|
9260
9441
|
});
|
|
9261
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
9262
|
-
var listItemStyles = /*#__PURE__*/css(_templateObject4$
|
|
9442
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
9443
|
+
var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
9263
9444
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
9264
9445
|
var theme = _ref5.theme;
|
|
9265
9446
|
return {
|
|
@@ -9267,7 +9448,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
|
9267
9448
|
color: theme.colors.black,
|
|
9268
9449
|
title: 'Select Arrow'
|
|
9269
9450
|
};
|
|
9270
|
-
})(_templateObject5$
|
|
9451
|
+
})(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
9271
9452
|
var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
9272
9453
|
var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
9273
9454
|
var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
@@ -9666,9 +9847,9 @@ function Select(_ref3) {
|
|
|
9666
9847
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
9667
9848
|
}
|
|
9668
9849
|
|
|
9669
|
-
var _templateObject$
|
|
9670
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
9671
|
-
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9850
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$J, _templateObject4$z;
|
|
9851
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
9852
|
+
var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
9672
9853
|
var width = _ref.width;
|
|
9673
9854
|
if (!width) return 'none';
|
|
9674
9855
|
return width + 'px';
|
|
@@ -9685,12 +9866,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateOb
|
|
|
9685
9866
|
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
9686
9867
|
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
9687
9868
|
});
|
|
9688
|
-
var TextLabel$
|
|
9869
|
+
var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
9689
9870
|
var darkMode = _ref5.darkMode;
|
|
9690
9871
|
if (darkMode) return "var(--base-color-white)";
|
|
9691
9872
|
return "var(--base-color-black)";
|
|
9692
9873
|
});
|
|
9693
|
-
var ErrorLabel$
|
|
9874
|
+
var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
9694
9875
|
var darkMode = _ref6.darkMode;
|
|
9695
9876
|
if (darkMode) return "var(--base-color-white)";
|
|
9696
9877
|
return "var(--base-color-errorstate)";
|
|
@@ -9707,7 +9888,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9707
9888
|
width = _ref.width,
|
|
9708
9889
|
darkMode = _ref.darkMode,
|
|
9709
9890
|
children = _ref.children;
|
|
9710
|
-
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$
|
|
9891
|
+
return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
|
|
9711
9892
|
darkMode: darkMode,
|
|
9712
9893
|
"data-testid": "select2-text-label"
|
|
9713
9894
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9716,7 +9897,7 @@ var WrapperComponent = function WrapperComponent(_ref) {
|
|
|
9716
9897
|
width: width,
|
|
9717
9898
|
error: error,
|
|
9718
9899
|
darkMode: darkMode
|
|
9719
|
-
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$
|
|
9900
|
+
}, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
|
|
9720
9901
|
darkMode: darkMode,
|
|
9721
9902
|
"data-testid": "select2-error-label"
|
|
9722
9903
|
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
@@ -9806,8 +9987,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
9806
9987
|
})));
|
|
9807
9988
|
};
|
|
9808
9989
|
|
|
9809
|
-
var _templateObject$
|
|
9810
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
9990
|
+
var _templateObject$1d;
|
|
9991
|
+
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
9811
9992
|
var theme = _ref.theme;
|
|
9812
9993
|
return theme.colors.primary;
|
|
9813
9994
|
});
|
|
@@ -9835,8 +10016,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
9835
10016
|
})));
|
|
9836
10017
|
};
|
|
9837
10018
|
|
|
9838
|
-
var _templateObject$
|
|
9839
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
10019
|
+
var _templateObject$1e, _templateObject2$S;
|
|
10020
|
+
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
9840
10021
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9841
10022
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9842
10023
|
return aspectRatio;
|
|
@@ -9846,7 +10027,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1
|
|
|
9846
10027
|
height = _ref2.height;
|
|
9847
10028
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
9848
10029
|
});
|
|
9849
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10030
|
+
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
9850
10031
|
|
|
9851
10032
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
9852
10033
|
var caption = _ref.caption,
|
|
@@ -9884,13 +10065,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
9884
10065
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
9885
10066
|
};
|
|
9886
10067
|
|
|
9887
|
-
var _templateObject$
|
|
9888
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9889
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
10068
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$K;
|
|
10069
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10070
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
9890
10071
|
var displayAttribution = _ref.displayAttribution;
|
|
9891
10072
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
9892
10073
|
});
|
|
9893
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10074
|
+
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
9894
10075
|
|
|
9895
10076
|
var Quote = function Quote(_ref) {
|
|
9896
10077
|
var text = _ref.text,
|
|
@@ -9914,12 +10095,12 @@ var Quote = function Quote(_ref) {
|
|
|
9914
10095
|
}, attribution))));
|
|
9915
10096
|
};
|
|
9916
10097
|
|
|
9917
|
-
var _templateObject$
|
|
9918
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
9919
|
-
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$
|
|
9920
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
9921
|
-
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$
|
|
9922
|
-
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$
|
|
10098
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$r, _templateObject6$l;
|
|
10099
|
+
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10100
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10101
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10102
|
+
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
10103
|
+
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
9923
10104
|
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
9924
10105
|
|
|
9925
10106
|
var MiniCard = function MiniCard(_ref) {
|
|
@@ -9958,11 +10139,11 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
9958
10139
|
}, title)))));
|
|
9959
10140
|
};
|
|
9960
10141
|
|
|
9961
|
-
var _templateObject$
|
|
9962
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9963
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
9964
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
9965
|
-
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$
|
|
10142
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B;
|
|
10143
|
+
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10144
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
10145
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10146
|
+
var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
9966
10147
|
|
|
9967
10148
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
9968
10149
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -10060,15 +10241,113 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10060
10241
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10061
10242
|
};
|
|
10062
10243
|
|
|
10063
|
-
var _templateObject$
|
|
10064
|
-
var
|
|
10065
|
-
var
|
|
10066
|
-
var
|
|
10067
|
-
var
|
|
10244
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$s, _templateObject6$m;
|
|
10245
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10246
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10247
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10248
|
+
var color = _ref.color;
|
|
10249
|
+
return "var(--base-color-" + color + ")";
|
|
10250
|
+
});
|
|
10251
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10252
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10253
|
+
var color = _ref2.color;
|
|
10254
|
+
return "var(--base-color-" + color + ")";
|
|
10255
|
+
});
|
|
10256
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10257
|
+
var color = _ref3.color;
|
|
10258
|
+
return "var(--base-color-" + color + ")";
|
|
10259
|
+
});
|
|
10260
|
+
|
|
10261
|
+
/**
|
|
10262
|
+
* Password strength indicator component.
|
|
10263
|
+
* This renders some number of lines (6 by default)
|
|
10264
|
+
* which should become active when the user improves
|
|
10265
|
+
* the strength of the entered password.
|
|
10266
|
+
*
|
|
10267
|
+
* ## Sections
|
|
10268
|
+
* To set number of sections it should be passed
|
|
10269
|
+
* as `sections` prop.
|
|
10270
|
+
*
|
|
10271
|
+
* ## Active section
|
|
10272
|
+
* To set number of active sections it should be passed
|
|
10273
|
+
* as `activeSections` prop.
|
|
10274
|
+
*
|
|
10275
|
+
* ## Colors
|
|
10276
|
+
* Color of every element can be controlled by properties:
|
|
10277
|
+
* `sectionsColor`, `activeSectionsColor`,
|
|
10278
|
+
* `textColor`, `strengthLabelColor`.
|
|
10279
|
+
*
|
|
10280
|
+
* ## Text
|
|
10281
|
+
* `text` prop is used to render some message.
|
|
10282
|
+
* For example error (together with proper red color)
|
|
10283
|
+
* or some password requirement. It can be empty.
|
|
10284
|
+
*
|
|
10285
|
+
* ## Strength label
|
|
10286
|
+
* `strengthLabel` prop is used to render strength characteristic
|
|
10287
|
+
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10288
|
+
* It can be empty.
|
|
10289
|
+
*/
|
|
10290
|
+
|
|
10291
|
+
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10292
|
+
var _ref$sections = _ref.sections,
|
|
10293
|
+
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10294
|
+
_ref$activeSections = _ref.activeSections,
|
|
10295
|
+
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10296
|
+
_ref$sectionsColor = _ref.sectionsColor,
|
|
10297
|
+
sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
|
|
10298
|
+
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10299
|
+
activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
|
|
10300
|
+
_ref$text = _ref.text,
|
|
10301
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10302
|
+
_ref$textColor = _ref.textColor,
|
|
10303
|
+
textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
|
|
10304
|
+
_ref$strengthLabel = _ref.strengthLabel,
|
|
10305
|
+
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10306
|
+
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10307
|
+
strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
|
|
10308
|
+
|
|
10309
|
+
var setSectionColor = function setSectionColor(index) {
|
|
10310
|
+
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10311
|
+
};
|
|
10312
|
+
|
|
10313
|
+
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10314
|
+
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10315
|
+
};
|
|
10316
|
+
|
|
10317
|
+
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10318
|
+
"data-testid": "password-strength-container"
|
|
10319
|
+
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10320
|
+
"data-testid": "password-strength-sections"
|
|
10321
|
+
}, Array.from({
|
|
10322
|
+
length: sections
|
|
10323
|
+
}, function (_section, i) {
|
|
10324
|
+
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10325
|
+
key: i,
|
|
10326
|
+
color: setSectionColor(i),
|
|
10327
|
+
"data-testid": setSectionDataTestId(i)
|
|
10328
|
+
});
|
|
10329
|
+
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10330
|
+
color: textColor,
|
|
10331
|
+
"data-testid": "password-strength-text"
|
|
10332
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10333
|
+
level: 6
|
|
10334
|
+
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10335
|
+
color: strengthLabelColor,
|
|
10336
|
+
"data-testid": "password-strength-label"
|
|
10337
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10338
|
+
level: 2
|
|
10339
|
+
}, strengthLabel))));
|
|
10340
|
+
};
|
|
10341
|
+
|
|
10342
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t;
|
|
10343
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10344
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
|
|
10345
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
|
|
10346
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
|
|
10068
10347
|
var isActive = _ref.isActive;
|
|
10069
10348
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10070
10349
|
}, Colors.MidGrey);
|
|
10071
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
10350
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
|
|
10072
10351
|
var isOpen = _ref2.isOpen;
|
|
10073
10352
|
return isOpen ? 'block' : 'none';
|
|
10074
10353
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10079,15 +10358,24 @@ var NavItem = function NavItem(_ref) {
|
|
|
10079
10358
|
onClick = _ref.onClick,
|
|
10080
10359
|
isActive = _ref.isActive,
|
|
10081
10360
|
isMobile = _ref.isMobile;
|
|
10082
|
-
|
|
10083
|
-
|
|
10084
|
-
|
|
10085
|
-
|
|
10086
|
-
e.preventDefault();
|
|
10087
|
-
onClick();
|
|
10361
|
+
var linkRef = useRef(null);
|
|
10362
|
+
useEffect(function () {
|
|
10363
|
+
var handleClick = function handleClick(e) {
|
|
10364
|
+
if (onClick) onClick(e);
|
|
10088
10365
|
};
|
|
10089
|
-
}();
|
|
10090
10366
|
|
|
10367
|
+
var linkElement = linkRef.current;
|
|
10368
|
+
|
|
10369
|
+
if (linkElement) {
|
|
10370
|
+
linkElement.addEventListener('click', handleClick);
|
|
10371
|
+
}
|
|
10372
|
+
|
|
10373
|
+
return function () {
|
|
10374
|
+
if (linkElement) {
|
|
10375
|
+
linkElement.removeEventListener('click', handleClick);
|
|
10376
|
+
}
|
|
10377
|
+
};
|
|
10378
|
+
}, [onClick]);
|
|
10091
10379
|
var ariaCurrent = isMobile ? undefined : isActive;
|
|
10092
10380
|
var ariaSelected = isMobile ? isActive : undefined;
|
|
10093
10381
|
var role = isMobile ? 'option' : undefined;
|
|
@@ -10096,7 +10384,7 @@ var NavItem = function NavItem(_ref) {
|
|
|
10096
10384
|
"aria-selected": ariaSelected,
|
|
10097
10385
|
role: role
|
|
10098
10386
|
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
10099
|
-
|
|
10387
|
+
ref: linkRef,
|
|
10100
10388
|
href: href,
|
|
10101
10389
|
isActive: isActive,
|
|
10102
10390
|
"data-testid": "nav-menu-item" + (isActive ? '-active' : '')
|
|
@@ -10165,16 +10453,16 @@ var MobileNav = function MobileNav(_ref4) {
|
|
|
10165
10453
|
"aria-expanded": isOpen,
|
|
10166
10454
|
"aria-controls": "auxiliary-nav-list",
|
|
10167
10455
|
"aria-haspopup": "listbox",
|
|
10168
|
-
role:
|
|
10456
|
+
role: "combobox"
|
|
10169
10457
|
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
10170
10458
|
iconName: "DropdownArrow",
|
|
10171
10459
|
direction: isOpen ? 'left' : 'right'
|
|
10172
10460
|
})), /*#__PURE__*/React__default.createElement(MobileMenuList, {
|
|
10173
|
-
id:
|
|
10461
|
+
id: "auxiliary-nav-list",
|
|
10174
10462
|
"data-testid": "nav-menu-list",
|
|
10175
10463
|
isOpen: isOpen,
|
|
10176
10464
|
"aria-hidden": !isOpen,
|
|
10177
|
-
role:
|
|
10465
|
+
role: "listbox"
|
|
10178
10466
|
}, items.map(function (_ref5, idx) {
|
|
10179
10467
|
var text = _ref5.text,
|
|
10180
10468
|
href = _ref5.href,
|
|
@@ -10229,112 +10517,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10229
10517
|
});
|
|
10230
10518
|
};
|
|
10231
10519
|
|
|
10232
|
-
var _templateObject$
|
|
10233
|
-
var
|
|
10234
|
-
var
|
|
10235
|
-
var
|
|
10236
|
-
|
|
10237
|
-
return "var(--base-color-" + color + ")";
|
|
10238
|
-
});
|
|
10239
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10240
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10241
|
-
var color = _ref2.color;
|
|
10242
|
-
return "var(--base-color-" + color + ")";
|
|
10243
|
-
});
|
|
10244
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10245
|
-
var color = _ref3.color;
|
|
10246
|
-
return "var(--base-color-" + color + ")";
|
|
10247
|
-
});
|
|
10248
|
-
|
|
10249
|
-
/**
|
|
10250
|
-
* Password strength indicator component.
|
|
10251
|
-
* This renders some number of lines (6 by default)
|
|
10252
|
-
* which should become active when the user improves
|
|
10253
|
-
* the strength of the entered password.
|
|
10254
|
-
*
|
|
10255
|
-
* ## Sections
|
|
10256
|
-
* To set number of sections it should be passed
|
|
10257
|
-
* as `sections` prop.
|
|
10258
|
-
*
|
|
10259
|
-
* ## Active section
|
|
10260
|
-
* To set number of active sections it should be passed
|
|
10261
|
-
* as `activeSections` prop.
|
|
10262
|
-
*
|
|
10263
|
-
* ## Colors
|
|
10264
|
-
* Color of every element can be controlled by properties:
|
|
10265
|
-
* `sectionsColor`, `activeSectionsColor`,
|
|
10266
|
-
* `textColor`, `strengthLabelColor`.
|
|
10267
|
-
*
|
|
10268
|
-
* ## Text
|
|
10269
|
-
* `text` prop is used to render some message.
|
|
10270
|
-
* For example error (together with proper red color)
|
|
10271
|
-
* or some password requirement. It can be empty.
|
|
10272
|
-
*
|
|
10273
|
-
* ## Strength label
|
|
10274
|
-
* `strengthLabel` prop is used to render strength characteristic
|
|
10275
|
-
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10276
|
-
* It can be empty.
|
|
10277
|
-
*/
|
|
10278
|
-
|
|
10279
|
-
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10280
|
-
var _ref$sections = _ref.sections,
|
|
10281
|
-
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10282
|
-
_ref$activeSections = _ref.activeSections,
|
|
10283
|
-
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10284
|
-
_ref$sectionsColor = _ref.sectionsColor,
|
|
10285
|
-
sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
|
|
10286
|
-
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10287
|
-
activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
|
|
10288
|
-
_ref$text = _ref.text,
|
|
10289
|
-
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10290
|
-
_ref$textColor = _ref.textColor,
|
|
10291
|
-
textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
|
|
10292
|
-
_ref$strengthLabel = _ref.strengthLabel,
|
|
10293
|
-
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10294
|
-
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10295
|
-
strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
|
|
10296
|
-
|
|
10297
|
-
var setSectionColor = function setSectionColor(index) {
|
|
10298
|
-
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10299
|
-
};
|
|
10300
|
-
|
|
10301
|
-
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10302
|
-
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10303
|
-
};
|
|
10304
|
-
|
|
10305
|
-
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10306
|
-
"data-testid": "password-strength-container"
|
|
10307
|
-
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10308
|
-
"data-testid": "password-strength-sections"
|
|
10309
|
-
}, Array.from({
|
|
10310
|
-
length: sections
|
|
10311
|
-
}, function (_section, i) {
|
|
10312
|
-
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10313
|
-
key: i,
|
|
10314
|
-
color: setSectionColor(i),
|
|
10315
|
-
"data-testid": setSectionDataTestId(i)
|
|
10316
|
-
});
|
|
10317
|
-
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10318
|
-
color: textColor,
|
|
10319
|
-
"data-testid": "password-strength-text"
|
|
10320
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10321
|
-
level: 6
|
|
10322
|
-
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10323
|
-
color: strengthLabelColor,
|
|
10324
|
-
"data-testid": "password-strength-label"
|
|
10325
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10326
|
-
level: 2
|
|
10327
|
-
}, strengthLabel))));
|
|
10328
|
-
};
|
|
10329
|
-
|
|
10330
|
-
var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$t, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10331
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10332
|
-
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10333
|
-
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10334
|
-
var TableHeader = /*#__PURE__*/styled.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) {
|
|
10520
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$P, _templateObject4$E, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10521
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10522
|
+
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10523
|
+
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10524
|
+
var TableHeader = /*#__PURE__*/styled.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
10335
10525
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10336
10526
|
}, devices.tablet, devices.mobile);
|
|
10337
|
-
var TableCell = /*#__PURE__*/styled.td(_templateObject5$
|
|
10527
|
+
var TableCell = /*#__PURE__*/styled.td(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
|
|
10338
10528
|
return "calc(100% / " + (props.columns - 1) + ")";
|
|
10339
10529
|
}, devices.mobile);
|
|
10340
10530
|
var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
|
|
@@ -10612,9 +10802,9 @@ var LiveChat = function LiveChat() {
|
|
|
10612
10802
|
});
|
|
10613
10803
|
};
|
|
10614
10804
|
|
|
10615
|
-
var _templateObject$
|
|
10616
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
10617
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
10805
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
10806
|
+
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
10807
|
+
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
10618
10808
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
10619
10809
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
10620
10810
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -10642,11 +10832,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
10642
10832
|
}, children)));
|
|
10643
10833
|
};
|
|
10644
10834
|
|
|
10645
|
-
var _templateObject$
|
|
10646
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
10647
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
10648
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
10649
|
-
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$
|
|
10835
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
10836
|
+
var InnerModal = /*#__PURE__*/styled.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
10837
|
+
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
10838
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
10839
|
+
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
10650
10840
|
|
|
10651
10841
|
var MAX_Z_INDEX = 9999999999;
|
|
10652
10842
|
|
|
@@ -10766,8 +10956,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
10766
10956
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
10767
10957
|
};
|
|
10768
10958
|
|
|
10769
|
-
var _templateObject$
|
|
10770
|
-
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10959
|
+
var _templateObject$1n;
|
|
10960
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
10771
10961
|
var theme = _ref.theme;
|
|
10772
10962
|
return theme.colors.primary;
|
|
10773
10963
|
}, function (_ref2) {
|
|
@@ -11708,5 +11898,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
|
|
|
11708
11898
|
return theme.fonts.tablet.sizes.body[1];
|
|
11709
11899
|
}, devices.desktop, devices.largeDesktop);
|
|
11710
11900
|
|
|
11711
|
-
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
|
|
11901
|
+
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, breakpoints, devices, zIndexes };
|
|
11712
11902
|
//# sourceMappingURL=chord.esm.js.map
|