@royaloperahouse/chord 2.4.9 → 2.4.10-b-chord-development
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +210 -7
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +449 -268
- 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 +447 -269
- 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/ToggleButton/ToggleButton.d.ts +29 -0
- package/dist/components/atoms/ToggleButton/ToggleButton.style.d.ts +5 -0
- package/dist/components/atoms/Typography/Typography.d.ts +2 -2
- package/dist/components/atoms/index.d.ts +3 -2
- package/dist/components/index.d.ts +3 -3
- package/dist/components/molecules/PageHeading/index.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.d.ts +3 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +4 -1
- package/dist/components/molecules/index.d.ts +1 -1
- package/dist/components/organisms/FilterToggles/FilterToggles.d.ts +26 -0
- package/dist/components/organisms/FilterToggles/FilterToggles.style.d.ts +2 -0
- package/dist/components/organisms/FilterToggles/index.d.ts +23 -0
- package/dist/components/organisms/index.d.ts +2 -1
- package/dist/index.d.ts +3 -2
- package/dist/types/creditListing.d.ts +1 -0
- package/dist/types/formTypes.d.ts +12 -9
- package/dist/types/toggleButtonTypes.d.ts +26 -0
- package/dist/types/typography.d.ts +4 -0
- package/package.json +1 -1
- package/README.GIT +0 -277
package/dist/chord.esm.js
CHANGED
|
@@ -3002,7 +3002,39 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
|
|
|
3002
3002
|
});
|
|
3003
3003
|
|
|
3004
3004
|
var _templateObject$b;
|
|
3005
|
-
|
|
3005
|
+
/**
|
|
3006
|
+
* # IMPORTANT
|
|
3007
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
3008
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3009
|
+
*/
|
|
3010
|
+
|
|
3011
|
+
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) {
|
|
3012
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
3013
|
+
return columnStartDesktop;
|
|
3014
|
+
}, function (_ref2) {
|
|
3015
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
3016
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
3017
|
+
return columnSpanDesktop;
|
|
3018
|
+
}, devices.mobile, function (_ref3) {
|
|
3019
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
3020
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
3021
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
3022
|
+
}, function (_ref4) {
|
|
3023
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
3024
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
3025
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
3026
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
3027
|
+
}, devices.tablet, function (_ref5) {
|
|
3028
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
3029
|
+
return columnStartDevice;
|
|
3030
|
+
}, function (_ref6) {
|
|
3031
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
3032
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
3033
|
+
return columnSpanDevice;
|
|
3034
|
+
});
|
|
3035
|
+
|
|
3036
|
+
var _templateObject$c;
|
|
3037
|
+
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) {
|
|
3006
3038
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
3007
3039
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
3008
3040
|
return aspectRatio;
|
|
@@ -3020,8 +3052,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
|
|
|
3020
3052
|
return aspectRatio;
|
|
3021
3053
|
});
|
|
3022
3054
|
|
|
3023
|
-
var _templateObject$
|
|
3024
|
-
var ProgressView = /*#__PURE__*/styled.div(_templateObject$
|
|
3055
|
+
var _templateObject$d, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
3056
|
+
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) {
|
|
3025
3057
|
var height = _ref.height;
|
|
3026
3058
|
return height ? height + "px" : '6px';
|
|
3027
3059
|
});
|
|
@@ -3104,13 +3136,13 @@ var Progress = function Progress(_ref) {
|
|
|
3104
3136
|
}, renderSteps()));
|
|
3105
3137
|
};
|
|
3106
3138
|
|
|
3107
|
-
var _templateObject$
|
|
3108
|
-
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3139
|
+
var _templateObject$e, _templateObject2$5, _templateObject3$3;
|
|
3140
|
+
var RadioContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
3109
3141
|
var RadioLine = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__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"])));
|
|
3110
3142
|
var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
3111
3143
|
|
|
3112
|
-
var _templateObject$
|
|
3113
|
-
var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
3144
|
+
var _templateObject$f;
|
|
3145
|
+
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) {
|
|
3114
3146
|
var typography = _ref.typography;
|
|
3115
3147
|
return typography;
|
|
3116
3148
|
}, function (_ref2) {
|
|
@@ -3158,11 +3190,13 @@ var StyledTag = function StyledTag(_ref) {
|
|
|
3158
3190
|
var tag = _ref.tag,
|
|
3159
3191
|
typography = _ref.typography,
|
|
3160
3192
|
children = _ref.children,
|
|
3161
|
-
level = _ref.level
|
|
3193
|
+
level = _ref.level,
|
|
3194
|
+
id = _ref.id;
|
|
3162
3195
|
return /*#__PURE__*/React__default.createElement(Wrapper$1, {
|
|
3163
3196
|
typography: typography,
|
|
3164
3197
|
as: tag,
|
|
3165
|
-
level: level
|
|
3198
|
+
level: level,
|
|
3199
|
+
id: id
|
|
3166
3200
|
}, children);
|
|
3167
3201
|
};
|
|
3168
3202
|
var AltHeader = function AltHeader(_ref2) {
|
|
@@ -3203,12 +3237,14 @@ var Overline = function Overline(_ref5) {
|
|
|
3203
3237
|
var level = _ref5.level,
|
|
3204
3238
|
children = _ref5.children,
|
|
3205
3239
|
_ref5$tag = _ref5.tag,
|
|
3206
|
-
tag = _ref5$tag === void 0 ? 'div' : _ref5$tag
|
|
3240
|
+
tag = _ref5$tag === void 0 ? 'div' : _ref5$tag,
|
|
3241
|
+
id = _ref5.id;
|
|
3207
3242
|
var renderedTag = tag;
|
|
3208
3243
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
3209
3244
|
tag: renderedTag,
|
|
3210
3245
|
typography: "overline",
|
|
3211
|
-
level: level
|
|
3246
|
+
level: level,
|
|
3247
|
+
id: id
|
|
3212
3248
|
}, children);
|
|
3213
3249
|
};
|
|
3214
3250
|
var Subtitle = function Subtitle(_ref6) {
|
|
@@ -3267,8 +3303,8 @@ var Radio = function Radio(_ref) {
|
|
|
3267
3303
|
}, error)));
|
|
3268
3304
|
};
|
|
3269
3305
|
|
|
3270
|
-
var _templateObject$
|
|
3271
|
-
var Container = /*#__PURE__*/styled.div(_templateObject$
|
|
3306
|
+
var _templateObject$g, _templateObject2$6, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3307
|
+
var Container = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3272
3308
|
var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__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) {
|
|
3273
3309
|
var error = _ref.error,
|
|
3274
3310
|
darkMode = _ref.darkMode,
|
|
@@ -3376,8 +3412,8 @@ var Radio2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
3376
3412
|
}, error)));
|
|
3377
3413
|
});
|
|
3378
3414
|
|
|
3379
|
-
var _templateObject$
|
|
3380
|
-
var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
3415
|
+
var _templateObject$h, _templateObject2$7, _templateObject3$5;
|
|
3416
|
+
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"])));
|
|
3381
3417
|
var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__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) {
|
|
3382
3418
|
var theme = _ref.theme;
|
|
3383
3419
|
return theme.colors.primary;
|
|
@@ -3448,8 +3484,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3448
3484
|
}, renderNextIcon()));
|
|
3449
3485
|
};
|
|
3450
3486
|
|
|
3451
|
-
var _templateObject$
|
|
3452
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$
|
|
3487
|
+
var _templateObject$i;
|
|
3488
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3453
3489
|
var fillColor = _ref.fillColor;
|
|
3454
3490
|
return fillColor;
|
|
3455
3491
|
});
|
|
@@ -3473,8 +3509,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3473
3509
|
})));
|
|
3474
3510
|
};
|
|
3475
3511
|
|
|
3476
|
-
var _templateObject$
|
|
3477
|
-
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
3512
|
+
var _templateObject$j, _templateObject2$8;
|
|
3513
|
+
var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3478
3514
|
var Splitter = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3479
3515
|
|
|
3480
3516
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3493,8 +3529,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3493
3529
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3494
3530
|
};
|
|
3495
3531
|
|
|
3496
|
-
var _templateObject$
|
|
3497
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3532
|
+
var _templateObject$k;
|
|
3533
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3498
3534
|
|
|
3499
3535
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3500
3536
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3704,8 +3740,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3704
3740
|
})))));
|
|
3705
3741
|
};
|
|
3706
3742
|
|
|
3707
|
-
var _templateObject$
|
|
3708
|
-
var CustomImage = /*#__PURE__*/styled.img(_templateObject$
|
|
3743
|
+
var _templateObject$l, _templateObject2$9;
|
|
3744
|
+
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);
|
|
3709
3745
|
var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__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);
|
|
3710
3746
|
|
|
3711
3747
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3738,8 +3774,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3738
3774
|
}));
|
|
3739
3775
|
};
|
|
3740
3776
|
|
|
3741
|
-
var _templateObject$
|
|
3742
|
-
var TabText = /*#__PURE__*/styled.a(_templateObject$
|
|
3777
|
+
var _templateObject$m, _templateObject2$a;
|
|
3778
|
+
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) {
|
|
3743
3779
|
if (props.withIcon === 'left') {
|
|
3744
3780
|
return "margin-left: 5px;";
|
|
3745
3781
|
}
|
|
@@ -3838,8 +3874,8 @@ var Tab = function Tab(_ref) {
|
|
|
3838
3874
|
}));
|
|
3839
3875
|
};
|
|
3840
3876
|
|
|
3841
|
-
var _templateObject$
|
|
3842
|
-
var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
3877
|
+
var _templateObject$n, _templateObject2$b;
|
|
3878
|
+
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) {
|
|
3843
3879
|
var iconName = _ref.iconName;
|
|
3844
3880
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3845
3881
|
}, function (_ref2) {
|
|
@@ -3890,8 +3926,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3890
3926
|
})) : null, children);
|
|
3891
3927
|
};
|
|
3892
3928
|
|
|
3893
|
-
var _templateObject$
|
|
3894
|
-
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
3929
|
+
var _templateObject$o, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3930
|
+
var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3895
3931
|
var width = _ref.width;
|
|
3896
3932
|
return width ? width + "px;" : '100%;';
|
|
3897
3933
|
}, function (_ref2) {
|
|
@@ -4014,8 +4050,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
4014
4050
|
}, error))));
|
|
4015
4051
|
};
|
|
4016
4052
|
|
|
4017
|
-
var _templateObject$
|
|
4018
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
4053
|
+
var _templateObject$p, _templateObject2$d, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
4054
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4019
4055
|
var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4020
4056
|
var width = _ref.width;
|
|
4021
4057
|
if (!width) return 'none';
|
|
@@ -4141,8 +4177,8 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4141
4177
|
}, error)));
|
|
4142
4178
|
});
|
|
4143
4179
|
|
|
4144
|
-
var _templateObject$
|
|
4145
|
-
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
4180
|
+
var _templateObject$q, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
4181
|
+
var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4146
4182
|
var textStyles = /*#__PURE__*/css(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
|
|
4147
4183
|
var theme = _ref.theme;
|
|
4148
4184
|
return theme.fonts.desktop.weights.body[1];
|
|
@@ -4215,8 +4251,8 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4215
4251
|
}, error) : null);
|
|
4216
4252
|
};
|
|
4217
4253
|
|
|
4218
|
-
var _templateObject$
|
|
4219
|
-
var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$
|
|
4254
|
+
var _templateObject$r, _templateObject2$f;
|
|
4255
|
+
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) {
|
|
4220
4256
|
var iconName = _ref.iconName;
|
|
4221
4257
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
4222
4258
|
}, function (_ref2) {
|
|
@@ -4252,8 +4288,8 @@ var TextLogoProduct;
|
|
|
4252
4288
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4253
4289
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4254
4290
|
|
|
4255
|
-
var _templateObject$
|
|
4256
|
-
var TickboxError = /*#__PURE__*/styled.div(_templateObject$
|
|
4291
|
+
var _templateObject$s, _templateObject2$g, _templateObject3$9, _templateObject4$6;
|
|
4292
|
+
var TickboxError = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4257
4293
|
var dark = _ref.dark;
|
|
4258
4294
|
return dark ? 'white' : 'errorstate';
|
|
4259
4295
|
});
|
|
@@ -4374,8 +4410,8 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4374
4410
|
}, error)));
|
|
4375
4411
|
};
|
|
4376
4412
|
|
|
4377
|
-
var _templateObject$
|
|
4378
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
4413
|
+
var _templateObject$t, _templateObject2$h, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2;
|
|
4414
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4379
4415
|
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) {
|
|
4380
4416
|
var error = _ref.error,
|
|
4381
4417
|
darkMode = _ref.darkMode,
|
|
@@ -4485,8 +4521,8 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
4485
4521
|
}, error)));
|
|
4486
4522
|
});
|
|
4487
4523
|
|
|
4488
|
-
var _templateObject$
|
|
4489
|
-
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
4524
|
+
var _templateObject$u, _templateObject2$i, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4525
|
+
var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4490
4526
|
var color = _ref.color;
|
|
4491
4527
|
return color;
|
|
4492
4528
|
});
|
|
@@ -4594,8 +4630,8 @@ var Timer = function Timer(_ref) {
|
|
|
4594
4630
|
}));
|
|
4595
4631
|
};
|
|
4596
4632
|
|
|
4597
|
-
var _templateObject$
|
|
4598
|
-
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$
|
|
4633
|
+
var _templateObject$v;
|
|
4634
|
+
var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$v || (_templateObject$v = /*#__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"])));
|
|
4599
4635
|
|
|
4600
4636
|
var TypeTags = function TypeTags(_ref) {
|
|
4601
4637
|
var list = _ref.list;
|
|
@@ -5337,8 +5373,8 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
5337
5373
|
}
|
|
5338
5374
|
});
|
|
5339
5375
|
|
|
5340
|
-
var _templateObject$
|
|
5341
|
-
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$
|
|
5376
|
+
var _templateObject$w, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5377
|
+
var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$w || (_templateObject$w = /*#__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"])));
|
|
5342
5378
|
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"])));
|
|
5343
5379
|
var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5344
5380
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
|
|
@@ -5557,8 +5593,8 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5557
5593
|
})));
|
|
5558
5594
|
};
|
|
5559
5595
|
|
|
5560
|
-
var _templateObject$
|
|
5561
|
-
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5596
|
+
var _templateObject$x, _templateObject2$k, _templateObject3$d, _templateObject4$a, _templateObject5$7;
|
|
5597
|
+
var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5562
5598
|
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) {
|
|
5563
5599
|
var darkMode = _ref.darkMode;
|
|
5564
5600
|
return darkMode ? 'white' : 'errorstate';
|
|
@@ -5785,8 +5821,70 @@ var Component = function Component(_ref) {
|
|
|
5785
5821
|
}, error)));
|
|
5786
5822
|
};
|
|
5787
5823
|
|
|
5788
|
-
var _templateObject$
|
|
5789
|
-
var
|
|
5824
|
+
var _templateObject$y;
|
|
5825
|
+
var colors$1 = core.colors;
|
|
5826
|
+
var Tile = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n background-color: ", ";\n padding: 12px;\n cursor: pointer;\n width: fit-content;\n user-select: none;\n\n svg {\n display: ", ";\n height: 18px;\n width: 18px;\n margin-right: 14px;\n\n @media ", " {\n height: 16px;\n width: 16px;\n }\n }\n"])), function (_ref) {
|
|
5827
|
+
var isSelected = _ref.isSelected;
|
|
5828
|
+
return isSelected ? colors$1.midgrey : colors$1.lightgrey;
|
|
5829
|
+
}, function (_ref2) {
|
|
5830
|
+
var isSelected = _ref2.isSelected;
|
|
5831
|
+
return !isSelected && 'none';
|
|
5832
|
+
}, devices.mobileAndTablet);
|
|
5833
|
+
|
|
5834
|
+
/**
|
|
5835
|
+
* A ToggleButton component that renders a toggleable button with an icon and label.
|
|
5836
|
+
*
|
|
5837
|
+
* # Usage
|
|
5838
|
+
* The primary use case this component was written for is to be used within a group of
|
|
5839
|
+
* toggles for filtering content displayed on page. One such implementation can be found in
|
|
5840
|
+
* Filter Toggles component. However, this component can be used anywhere a toggle
|
|
5841
|
+
* button is needed.
|
|
5842
|
+
* Toggle Button requires the toggling logic to be handled by the parent component
|
|
5843
|
+
* and passed down to it as isToggleOn, onFilterItemClick, and onKeyDownHandler props.
|
|
5844
|
+
*
|
|
5845
|
+
* # Props
|
|
5846
|
+
* - `isToggleOn`: Boolean indicating if the toggle is on.
|
|
5847
|
+
* - `onFilterItemClick`: Function to handle the click event on the toggle button.
|
|
5848
|
+
* - `onKeyDownHandler`: Function to handle the keydown event on the toggle button.
|
|
5849
|
+
* - `item`: Object representing the item associated with the toggle button.
|
|
5850
|
+
* - `ariaLabelledBy`: Recommended when used as part of a group of toggles under a common
|
|
5851
|
+
* label or title. A string which should be identical to the id of the label or title.
|
|
5852
|
+
*
|
|
5853
|
+
* # Design and Accessibility
|
|
5854
|
+
* - aria-labelledby is used to associate the toggle button with a label or title when
|
|
5855
|
+
* used as part of a group of toggles.
|
|
5856
|
+
* - The component is designed to be keyboard-navigable.
|
|
5857
|
+
* - aria-selected is used to indicate the selected state of the toggle button.
|
|
5858
|
+
*/
|
|
5859
|
+
|
|
5860
|
+
var ToggleButton = function ToggleButton(_ref) {
|
|
5861
|
+
var isToggleOn = _ref.isToggleOn,
|
|
5862
|
+
onFilterItemClick = _ref.onFilterItemClick,
|
|
5863
|
+
onKeyDownHandler = _ref.onKeyDownHandler,
|
|
5864
|
+
item = _ref.item,
|
|
5865
|
+
ariaLabelledBy = _ref.ariaLabelledBy;
|
|
5866
|
+
return /*#__PURE__*/React__default.createElement(Tile, {
|
|
5867
|
+
isSelected: isToggleOn,
|
|
5868
|
+
onClick: function onClick() {
|
|
5869
|
+
return onFilterItemClick(item);
|
|
5870
|
+
},
|
|
5871
|
+
onKeyDown: function onKeyDown(e) {
|
|
5872
|
+
return onKeyDownHandler(e, item);
|
|
5873
|
+
},
|
|
5874
|
+
tabIndex: 0,
|
|
5875
|
+
"aria-labelledby": ariaLabelledBy,
|
|
5876
|
+
"aria-selected": isToggleOn,
|
|
5877
|
+
role: 'checkbox'
|
|
5878
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5879
|
+
color: Colors.Black,
|
|
5880
|
+
iconName: "Confirm"
|
|
5881
|
+
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5882
|
+
level: 1
|
|
5883
|
+
}, item.label));
|
|
5884
|
+
};
|
|
5885
|
+
|
|
5886
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5887
|
+
var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5790
5888
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5791
5889
|
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 ";
|
|
5792
5890
|
});
|
|
@@ -5810,8 +5908,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
|
|
|
5810
5908
|
var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5811
5909
|
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);
|
|
5812
5910
|
|
|
5813
|
-
var _templateObject$
|
|
5814
|
-
var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
5911
|
+
var _templateObject$A;
|
|
5912
|
+
var LogoWrapper = /*#__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"])));
|
|
5815
5913
|
|
|
5816
5914
|
var Logo = function Logo(_ref) {
|
|
5817
5915
|
var _ref$id = _ref.id,
|
|
@@ -5843,11 +5941,11 @@ var Logo = function Logo(_ref) {
|
|
|
5843
5941
|
}))));
|
|
5844
5942
|
};
|
|
5845
5943
|
|
|
5846
|
-
var _templateObject$
|
|
5847
|
-
var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
5944
|
+
var _templateObject$B;
|
|
5945
|
+
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);
|
|
5848
5946
|
|
|
5849
|
-
var _templateObject$
|
|
5850
|
-
var BasketContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
5947
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$f, _templateObject4$c;
|
|
5948
|
+
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) {
|
|
5851
5949
|
var selected = _ref.selected,
|
|
5852
5950
|
colorPrimary = _ref.colorPrimary;
|
|
5853
5951
|
|
|
@@ -6036,8 +6134,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
6036
6134
|
}, expiryTime ? basketText : text) : ''));
|
|
6037
6135
|
};
|
|
6038
6136
|
|
|
6039
|
-
var _templateObject$
|
|
6040
|
-
var SearchContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6137
|
+
var _templateObject$D, _templateObject2$n;
|
|
6138
|
+
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) {
|
|
6041
6139
|
var selected = _ref.selected,
|
|
6042
6140
|
colorPrimary = _ref.colorPrimary;
|
|
6043
6141
|
|
|
@@ -6329,8 +6427,8 @@ var NavTop = function NavTop(_ref) {
|
|
|
6329
6427
|
}));
|
|
6330
6428
|
};
|
|
6331
6429
|
|
|
6332
|
-
var _templateObject$
|
|
6333
|
-
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6430
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$g, _templateObject4$d;
|
|
6431
|
+
var TabsContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
6334
6432
|
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) {
|
|
6335
6433
|
if (props.showMenu) {
|
|
6336
6434
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
@@ -6472,8 +6570,8 @@ var Tabs = function Tabs(_ref) {
|
|
|
6472
6570
|
}, "MENU"))));
|
|
6473
6571
|
};
|
|
6474
6572
|
|
|
6475
|
-
var _templateObject$
|
|
6476
|
-
var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
6573
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6574
|
+
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);
|
|
6477
6575
|
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"])));
|
|
6478
6576
|
var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__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"])));
|
|
6479
6577
|
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);
|
|
@@ -6710,16 +6808,16 @@ var Navigation = function Navigation(_ref) {
|
|
|
6710
6808
|
})))));
|
|
6711
6809
|
};
|
|
6712
6810
|
|
|
6713
|
-
var _templateObject$
|
|
6714
|
-
var FooterSection = /*#__PURE__*/styled.section(_templateObject$
|
|
6811
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
|
|
6812
|
+
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"])));
|
|
6715
6813
|
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"])));
|
|
6716
6814
|
var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__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);
|
|
6717
6815
|
var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6718
6816
|
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);
|
|
6719
6817
|
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);
|
|
6720
6818
|
|
|
6721
|
-
var _templateObject$
|
|
6722
|
-
var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$
|
|
6819
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$j;
|
|
6820
|
+
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);
|
|
6723
6821
|
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);
|
|
6724
6822
|
var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
|
|
6725
6823
|
|
|
@@ -6737,8 +6835,8 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6737
6835
|
}));
|
|
6738
6836
|
};
|
|
6739
6837
|
|
|
6740
|
-
var _templateObject$
|
|
6741
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6838
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6839
|
+
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);
|
|
6742
6840
|
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);
|
|
6743
6841
|
var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__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);
|
|
6744
6842
|
var SignUpText = /*#__PURE__*/styled.p(_templateObject4$f || (_templateObject4$f = /*#__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);
|
|
@@ -6809,9 +6907,9 @@ var Footer = function Footer(_ref) {
|
|
|
6809
6907
|
}, additionalInfo)))));
|
|
6810
6908
|
};
|
|
6811
6909
|
|
|
6812
|
-
var _templateObject$
|
|
6910
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9;
|
|
6813
6911
|
var LIST_ITEM_GAP = 32;
|
|
6814
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
6912
|
+
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) {
|
|
6815
6913
|
var bottomBorder = _ref.bottomBorder;
|
|
6816
6914
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6817
6915
|
}, zIndexes.anchor);
|
|
@@ -7075,8 +7173,8 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
7075
7173
|
})) : null) : null))));
|
|
7076
7174
|
};
|
|
7077
7175
|
|
|
7078
|
-
var _templateObject$
|
|
7079
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7176
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
7177
|
+
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) {
|
|
7080
7178
|
var sticky = _ref.sticky;
|
|
7081
7179
|
return sticky ? 'sticky' : 'initial';
|
|
7082
7180
|
}, zIndexes.anchor);
|
|
@@ -7136,8 +7234,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
7136
7234
|
}, message)));
|
|
7137
7235
|
};
|
|
7138
7236
|
|
|
7139
|
-
var _templateObject$
|
|
7140
|
-
var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
7237
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
7238
|
+
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);
|
|
7141
7239
|
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"])));
|
|
7142
7240
|
var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__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) {
|
|
7143
7241
|
var theme = _ref.theme;
|
|
@@ -7217,8 +7315,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
7217
7315
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
7218
7316
|
};
|
|
7219
7317
|
|
|
7220
|
-
var _templateObject$
|
|
7221
|
-
var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
7318
|
+
var _templateObject$M;
|
|
7319
|
+
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);
|
|
7222
7320
|
|
|
7223
7321
|
var UpsellCards = function UpsellCards(_ref) {
|
|
7224
7322
|
var upsellCards = _ref.upsellCards;
|
|
@@ -7236,16 +7334,16 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
7236
7334
|
}));
|
|
7237
7335
|
};
|
|
7238
7336
|
|
|
7239
|
-
var _templateObject$
|
|
7240
|
-
var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$
|
|
7337
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$o;
|
|
7338
|
+
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) {
|
|
7241
7339
|
var theme = _ref.theme;
|
|
7242
7340
|
return theme.colors.primary;
|
|
7243
7341
|
}, devices.mobile, devices.tablet);
|
|
7244
7342
|
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);
|
|
7245
7343
|
var TextContainer = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__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);
|
|
7246
7344
|
|
|
7247
|
-
var _templateObject$
|
|
7248
|
-
var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7345
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$c;
|
|
7346
|
+
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"])));
|
|
7249
7347
|
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"])));
|
|
7250
7348
|
var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
|
|
7251
7349
|
var isVisible = _ref.isVisible;
|
|
@@ -7373,8 +7471,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
7373
7471
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
7374
7472
|
};
|
|
7375
7473
|
|
|
7376
|
-
var _templateObject$
|
|
7377
|
-
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7474
|
+
var _templateObject$P;
|
|
7475
|
+
var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
7378
7476
|
|
|
7379
7477
|
var Accordions = function Accordions(_ref) {
|
|
7380
7478
|
var _ref$items = _ref.items,
|
|
@@ -7392,7 +7490,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
7392
7490
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
7393
7491
|
contentType: accordion.contentType,
|
|
7394
7492
|
displayLevel: accordion.displayLevel,
|
|
7395
|
-
semanticLevel: accordion.semanticLevel
|
|
7493
|
+
semanticLevel: accordion.semanticLevel,
|
|
7494
|
+
initOpen: accordion.initOpen
|
|
7396
7495
|
}, accordion.children);
|
|
7397
7496
|
}));
|
|
7398
7497
|
};
|
|
@@ -7406,8 +7505,8 @@ var Theme = function Theme(_ref) {
|
|
|
7406
7505
|
}, children);
|
|
7407
7506
|
};
|
|
7408
7507
|
|
|
7409
|
-
var _templateObject$
|
|
7410
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7508
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$q;
|
|
7509
|
+
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) {
|
|
7411
7510
|
var theme = _ref.theme;
|
|
7412
7511
|
return theme.colors.primary;
|
|
7413
7512
|
}, devices.mobile);
|
|
@@ -7449,8 +7548,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7449
7548
|
}))))));
|
|
7450
7549
|
};
|
|
7451
7550
|
|
|
7452
|
-
var _templateObject$
|
|
7453
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$
|
|
7551
|
+
var _templateObject$R;
|
|
7552
|
+
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) {
|
|
7454
7553
|
var bgColor = _ref.bgColor,
|
|
7455
7554
|
theme = _ref.theme;
|
|
7456
7555
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7471,11 +7570,11 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7471
7570
|
}), children);
|
|
7472
7571
|
};
|
|
7473
7572
|
|
|
7474
|
-
var _templateObject$
|
|
7573
|
+
var _templateObject$S, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
|
|
7475
7574
|
var LENGTH_LARGE_TEXT = 28;
|
|
7476
7575
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7477
7576
|
var LENGTH_TEXT_TABLET = 10;
|
|
7478
|
-
var CardContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
7577
|
+
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) {
|
|
7479
7578
|
var isCardClickable = _ref.isCardClickable;
|
|
7480
7579
|
return isCardClickable ? 'pointer' : 'default';
|
|
7481
7580
|
}, function (_ref2) {
|
|
@@ -7759,9 +7858,9 @@ var Card = function Card(_ref) {
|
|
|
7759
7858
|
dangerouslySetInnerHTML: {
|
|
7760
7859
|
__html: truncatedText
|
|
7761
7860
|
}
|
|
7762
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7861
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7763
7862
|
level: 1
|
|
7764
|
-
}, highlightText))
|
|
7863
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7765
7864
|
fullWidth: fullWidth
|
|
7766
7865
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7767
7866
|
ref: node,
|
|
@@ -7775,8 +7874,8 @@ var Card = function Card(_ref) {
|
|
|
7775
7874
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7776
7875
|
};
|
|
7777
7876
|
|
|
7778
|
-
var _templateObject$
|
|
7779
|
-
var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
7877
|
+
var _templateObject$T, _templateObject2$A;
|
|
7878
|
+
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);
|
|
7780
7879
|
var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7781
7880
|
|
|
7782
7881
|
var Cards = function Cards(_ref) {
|
|
@@ -7822,8 +7921,8 @@ var Cards = function Cards(_ref) {
|
|
|
7822
7921
|
}));
|
|
7823
7922
|
};
|
|
7824
7923
|
|
|
7825
|
-
var _templateObject$
|
|
7826
|
-
var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
7924
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$s, _templateObject4$l, _templateObject5$g;
|
|
7925
|
+
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);
|
|
7827
7926
|
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) {
|
|
7828
7927
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7829
7928
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
@@ -7891,8 +7990,8 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7891
7990
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7892
7991
|
};
|
|
7893
7992
|
|
|
7894
|
-
var _templateObject$
|
|
7895
|
-
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$
|
|
7993
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$e, _templateObject7$8;
|
|
7994
|
+
var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7896
7995
|
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) {
|
|
7897
7996
|
return props.clickable ? 'pointer' : 'default';
|
|
7898
7997
|
}, devices.mobile);
|
|
@@ -7974,8 +8073,8 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7974
8073
|
}), link.text)));
|
|
7975
8074
|
};
|
|
7976
8075
|
|
|
7977
|
-
var _templateObject$
|
|
7978
|
-
var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$
|
|
8076
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$u, _templateObject4$n, _templateObject5$i;
|
|
8077
|
+
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) {
|
|
7979
8078
|
var imageToLeft = _ref.imageToLeft;
|
|
7980
8079
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7981
8080
|
}, devices.mobile);
|
|
@@ -8019,8 +8118,8 @@ var Editorial = function Editorial(_ref) {
|
|
|
8019
8118
|
})))));
|
|
8020
8119
|
};
|
|
8021
8120
|
|
|
8022
|
-
var _templateObject$
|
|
8023
|
-
var InfoContent = /*#__PURE__*/styled('div')(_templateObject$
|
|
8121
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$v, _templateObject4$o, _templateObject5$j;
|
|
8122
|
+
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"])));
|
|
8024
8123
|
var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8025
8124
|
var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
8026
8125
|
if (!props.infoThemed) {
|
|
@@ -8157,8 +8256,8 @@ var Information = function Information(_ref) {
|
|
|
8157
8256
|
}))));
|
|
8158
8257
|
};
|
|
8159
8258
|
|
|
8160
|
-
var _templateObject$
|
|
8161
|
-
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8259
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$w, _templateObject4$p, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$7;
|
|
8260
|
+
var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
|
|
8162
8261
|
var theme = _ref.theme;
|
|
8163
8262
|
return theme.colors.primary;
|
|
8164
8263
|
}, function (_ref2) {
|
|
@@ -8258,8 +8357,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
8258
8357
|
})));
|
|
8259
8358
|
};
|
|
8260
8359
|
|
|
8261
|
-
var _templateObject$
|
|
8262
|
-
var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8360
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$x, _templateObject4$q, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$8;
|
|
8361
|
+
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);
|
|
8263
8362
|
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);
|
|
8264
8363
|
var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$x || (_templateObject3$x = /*#__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);
|
|
8265
8364
|
var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__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);
|
|
@@ -8332,8 +8431,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8332
8431
|
}, "Scroll Down")) : null);
|
|
8333
8432
|
};
|
|
8334
8433
|
|
|
8335
|
-
var _templateObject$
|
|
8336
|
-
var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8434
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$y, _templateObject4$r, _templateObject5$m;
|
|
8435
|
+
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) {
|
|
8337
8436
|
var color = _ref.color;
|
|
8338
8437
|
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 ";
|
|
8339
8438
|
}, devices.mobileAndTablet);
|
|
@@ -8377,8 +8476,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8377
8476
|
}))));
|
|
8378
8477
|
};
|
|
8379
8478
|
|
|
8380
|
-
var _templateObject
|
|
8381
|
-
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject
|
|
8479
|
+
var _templateObject$$;
|
|
8480
|
+
var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
8382
8481
|
|
|
8383
8482
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
8384
8483
|
var link = _ref.link,
|
|
@@ -8398,8 +8497,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
8398
8497
|
}))));
|
|
8399
8498
|
};
|
|
8400
8499
|
|
|
8401
|
-
var _templateObject$
|
|
8402
|
-
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$
|
|
8500
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$z, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8501
|
+
var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
|
|
8403
8502
|
var BrandingTextBody = /*#__PURE__*/styled.div(_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"])));
|
|
8404
8503
|
var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8405
8504
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__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);
|
|
@@ -8529,7 +8628,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8529
8628
|
var isIOS = function isIOS() {
|
|
8530
8629
|
try {
|
|
8531
8630
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8532
|
-
if (typeof navigator === undefined) return false;
|
|
8631
|
+
if (typeof navigator === 'undefined') return false;
|
|
8533
8632
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8534
8633
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8535
8634
|
} catch (e) {
|
|
@@ -8545,7 +8644,7 @@ var useIOS = function useIOS() {
|
|
|
8545
8644
|
setIOS = _useState[1];
|
|
8546
8645
|
|
|
8547
8646
|
useEffect(function () {
|
|
8548
|
-
if (typeof navigator === undefined) return;
|
|
8647
|
+
if (typeof navigator === 'undefined') return;
|
|
8549
8648
|
setIOS(isIOS());
|
|
8550
8649
|
}, []);
|
|
8551
8650
|
return IOS;
|
|
@@ -8731,8 +8830,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8731
8830
|
}), linkText))));
|
|
8732
8831
|
};
|
|
8733
8832
|
|
|
8734
|
-
var _templateObject
|
|
8735
|
-
var MorePages = /*#__PURE__*/styled.span(_templateObject
|
|
8833
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$A, _templateObject4$s;
|
|
8834
|
+
var MorePages = /*#__PURE__*/styled.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8736
8835
|
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
|
|
8737
8836
|
|
|
8738
8837
|
var PageNumber = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
|
|
@@ -8808,8 +8907,8 @@ var Pagination = function Pagination(_ref) {
|
|
|
8808
8907
|
}))));
|
|
8809
8908
|
};
|
|
8810
8909
|
|
|
8811
|
-
var _templateObject$
|
|
8812
|
-
var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
8910
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$i;
|
|
8911
|
+
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);
|
|
8813
8912
|
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"])));
|
|
8814
8913
|
var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8815
8914
|
var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
@@ -8865,11 +8964,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8865
8964
|
}));
|
|
8866
8965
|
};
|
|
8867
8966
|
|
|
8868
|
-
var _templateObject$
|
|
8869
|
-
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8870
|
-
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])))
|
|
8871
|
-
var
|
|
8872
|
-
|
|
8967
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$C, _templateObject4$u;
|
|
8968
|
+
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8969
|
+
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
|
|
8970
|
+
var columnCount = _ref.columnCount;
|
|
8971
|
+
return "repeat(" + columnCount + ", 1fr)";
|
|
8972
|
+
}, devices.mobile, devices.tablet);
|
|
8973
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
8974
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8873
8975
|
|
|
8874
8976
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8875
8977
|
return array.reduce(function (acc, item) {
|
|
@@ -8880,19 +8982,29 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8880
8982
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8881
8983
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8882
8984
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8883
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8985
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8986
|
+
key: index
|
|
8987
|
+
}, title));
|
|
8884
8988
|
} else if (index > 0) {
|
|
8885
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8989
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8990
|
+
key: index
|
|
8991
|
+
}, ", ", title);
|
|
8886
8992
|
}
|
|
8887
8993
|
|
|
8888
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8994
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8995
|
+
key: index
|
|
8996
|
+
}, title);
|
|
8889
8997
|
}));
|
|
8890
8998
|
};
|
|
8891
8999
|
|
|
8892
9000
|
var CreditListing = function CreditListing(_ref) {
|
|
8893
|
-
var roles = _ref.roles
|
|
9001
|
+
var roles = _ref.roles,
|
|
9002
|
+
_ref$columnCount = _ref.columnCount,
|
|
9003
|
+
columnCount = _ref$columnCount === void 0 ? 4 : _ref$columnCount;
|
|
8894
9004
|
var charThreshold = 180;
|
|
8895
|
-
return /*#__PURE__*/React__default.createElement(CreditListingWrapper,
|
|
9005
|
+
return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
|
|
9006
|
+
columnCount: columnCount
|
|
9007
|
+
}, roles.map(function (_ref2, index) {
|
|
8896
9008
|
var name = _ref2.name,
|
|
8897
9009
|
people = _ref2.people,
|
|
8898
9010
|
description = _ref2.description,
|
|
@@ -8901,9 +9013,10 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8901
9013
|
additionalInfo = _ref2.additionalInfo,
|
|
8902
9014
|
dataROH = _ref2.dataROH;
|
|
8903
9015
|
var namesLength = getConcatenatedPropLength(people, 'name');
|
|
9016
|
+
var columnSpanDesktop = namesLength > charThreshold ? people.length > 2 ? 4 : 2 : 1;
|
|
8904
9017
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8905
|
-
columnSpanDesktop:
|
|
8906
|
-
columnSpanDevice:
|
|
9018
|
+
columnSpanDesktop: columnSpanDesktop,
|
|
9019
|
+
columnSpanDevice: columnSpanDesktop,
|
|
8907
9020
|
columnSpanSmallDevice: 2,
|
|
8908
9021
|
key: name + "-" + index
|
|
8909
9022
|
}, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
|
|
@@ -8937,14 +9050,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8937
9050
|
}));
|
|
8938
9051
|
};
|
|
8939
9052
|
|
|
8940
|
-
var _templateObject$
|
|
9053
|
+
var _templateObject$14, _templateObject2$M, _templateObject3$D, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
8941
9054
|
var LENGTH_TEXT = 28;
|
|
8942
9055
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8943
9056
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8944
9057
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8945
9058
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8946
9059
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8947
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9060
|
+
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) {
|
|
8948
9061
|
var imageToLeft = _ref.imageToLeft;
|
|
8949
9062
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8950
9063
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9215,10 +9328,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9215
9328
|
}))));
|
|
9216
9329
|
};
|
|
9217
9330
|
|
|
9218
|
-
var _templateObject$
|
|
9331
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$E, _templateObject4$w, _templateObject5$q, _templateObject6$k, _templateObject7$d;
|
|
9219
9332
|
var LENGTH_TEXT$2 = 28;
|
|
9220
9333
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9221
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$
|
|
9334
|
+
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) {
|
|
9222
9335
|
var imageToLeft = _ref.imageToLeft;
|
|
9223
9336
|
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'";
|
|
9224
9337
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9271,8 +9384,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
|
|
|
9271
9384
|
return '';
|
|
9272
9385
|
});
|
|
9273
9386
|
|
|
9274
|
-
var _templateObject$
|
|
9275
|
-
var VideoContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9387
|
+
var _templateObject$16;
|
|
9388
|
+
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) {
|
|
9276
9389
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9277
9390
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9278
9391
|
return aspectRatio;
|
|
@@ -9476,8 +9589,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9476
9589
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9477
9590
|
};
|
|
9478
9591
|
|
|
9479
|
-
var _templateObject$
|
|
9480
|
-
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
9592
|
+
var _templateObject$17;
|
|
9593
|
+
var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9481
9594
|
|
|
9482
9595
|
/**
|
|
9483
9596
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9535,8 +9648,8 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9535
9648
|
})));
|
|
9536
9649
|
};
|
|
9537
9650
|
|
|
9538
|
-
var _templateObject$
|
|
9539
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
9651
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$F;
|
|
9652
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9540
9653
|
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) {
|
|
9541
9654
|
var horizontalMode = _ref.horizontalMode;
|
|
9542
9655
|
if (horizontalMode) return 'row';
|
|
@@ -9625,8 +9738,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9625
9738
|
}, error)));
|
|
9626
9739
|
};
|
|
9627
9740
|
|
|
9628
|
-
var _templateObject$
|
|
9629
|
-
var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9741
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$G;
|
|
9742
|
+
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);
|
|
9630
9743
|
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"])));
|
|
9631
9744
|
var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
9632
9745
|
|
|
@@ -9690,8 +9803,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9690
9803
|
})))));
|
|
9691
9804
|
};
|
|
9692
9805
|
|
|
9693
|
-
var _templateObject$
|
|
9694
|
-
var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
9806
|
+
var _templateObject$1a;
|
|
9807
|
+
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);
|
|
9695
9808
|
|
|
9696
9809
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9697
9810
|
var title = _ref.title,
|
|
@@ -9719,8 +9832,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9719
9832
|
}, description))));
|
|
9720
9833
|
};
|
|
9721
9834
|
|
|
9722
|
-
var _templateObject$
|
|
9723
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
9835
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$H, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9836
|
+
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) {
|
|
9724
9837
|
var theme = _ref.theme;
|
|
9725
9838
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9726
9839
|
}, function (_ref2) {
|
|
@@ -10142,8 +10255,8 @@ function Select(_ref3) {
|
|
|
10142
10255
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10143
10256
|
}
|
|
10144
10257
|
|
|
10145
|
-
var _templateObject$
|
|
10146
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
10258
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$I, _templateObject4$y;
|
|
10259
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10147
10260
|
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) {
|
|
10148
10261
|
var width = _ref.width;
|
|
10149
10262
|
if (!width) return 'none';
|
|
@@ -10282,8 +10395,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10282
10395
|
})));
|
|
10283
10396
|
};
|
|
10284
10397
|
|
|
10285
|
-
var _templateObject$
|
|
10286
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
10398
|
+
var _templateObject$1d;
|
|
10399
|
+
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) {
|
|
10287
10400
|
var theme = _ref.theme;
|
|
10288
10401
|
return theme.colors.primary;
|
|
10289
10402
|
});
|
|
@@ -10311,8 +10424,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
10311
10424
|
})));
|
|
10312
10425
|
};
|
|
10313
10426
|
|
|
10314
|
-
var _templateObject$
|
|
10315
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
10427
|
+
var _templateObject$1e, _templateObject2$S;
|
|
10428
|
+
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) {
|
|
10316
10429
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10317
10430
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10318
10431
|
return aspectRatio;
|
|
@@ -10360,8 +10473,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10360
10473
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
10361
10474
|
};
|
|
10362
10475
|
|
|
10363
|
-
var _templateObject$
|
|
10364
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
10476
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$J;
|
|
10477
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10365
10478
|
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
10366
10479
|
var displayAttribution = _ref.displayAttribution;
|
|
10367
10480
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
@@ -10390,8 +10503,8 @@ var Quote = function Quote(_ref) {
|
|
|
10390
10503
|
}, attribution))));
|
|
10391
10504
|
};
|
|
10392
10505
|
|
|
10393
|
-
var _templateObject$
|
|
10394
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
10506
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$K, _templateObject4$z, _templateObject5$s, _templateObject6$m;
|
|
10507
|
+
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"])));
|
|
10395
10508
|
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"])));
|
|
10396
10509
|
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10397
10510
|
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
@@ -10434,8 +10547,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10434
10547
|
}, title)))));
|
|
10435
10548
|
};
|
|
10436
10549
|
|
|
10437
|
-
var _templateObject$
|
|
10438
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
10550
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$L, _templateObject4$A, _templateObject5$t;
|
|
10551
|
+
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"])));
|
|
10439
10552
|
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\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10440
10553
|
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10441
10554
|
var isVisible = _ref.isVisible;
|
|
@@ -10532,15 +10645,113 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10532
10645
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10533
10646
|
};
|
|
10534
10647
|
|
|
10535
|
-
var _templateObject$
|
|
10536
|
-
var
|
|
10537
|
-
var
|
|
10538
|
-
var
|
|
10539
|
-
var
|
|
10648
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$M, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10649
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10650
|
+
var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10651
|
+
var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10652
|
+
var color = _ref.color;
|
|
10653
|
+
return "var(--base-color-" + color + ")";
|
|
10654
|
+
});
|
|
10655
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10656
|
+
var Text = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10657
|
+
var color = _ref2.color;
|
|
10658
|
+
return "var(--base-color-" + color + ")";
|
|
10659
|
+
});
|
|
10660
|
+
var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10661
|
+
var color = _ref3.color;
|
|
10662
|
+
return "var(--base-color-" + color + ")";
|
|
10663
|
+
});
|
|
10664
|
+
|
|
10665
|
+
/**
|
|
10666
|
+
* Password strength indicator component.
|
|
10667
|
+
* This renders some number of lines (6 by default)
|
|
10668
|
+
* which should become active when the user improves
|
|
10669
|
+
* the strength of the entered password.
|
|
10670
|
+
*
|
|
10671
|
+
* ## Sections
|
|
10672
|
+
* To set number of sections it should be passed
|
|
10673
|
+
* as `sections` prop.
|
|
10674
|
+
*
|
|
10675
|
+
* ## Active section
|
|
10676
|
+
* To set number of active sections it should be passed
|
|
10677
|
+
* as `activeSections` prop.
|
|
10678
|
+
*
|
|
10679
|
+
* ## Colors
|
|
10680
|
+
* Color of every element can be controlled by properties:
|
|
10681
|
+
* `sectionsColor`, `activeSectionsColor`,
|
|
10682
|
+
* `textColor`, `strengthLabelColor`.
|
|
10683
|
+
*
|
|
10684
|
+
* ## Text
|
|
10685
|
+
* `text` prop is used to render some message.
|
|
10686
|
+
* For example error (together with proper red color)
|
|
10687
|
+
* or some password requirement. It can be empty.
|
|
10688
|
+
*
|
|
10689
|
+
* ## Strength label
|
|
10690
|
+
* `strengthLabel` prop is used to render strength characteristic
|
|
10691
|
+
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10692
|
+
* It can be empty.
|
|
10693
|
+
*/
|
|
10694
|
+
|
|
10695
|
+
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10696
|
+
var _ref$sections = _ref.sections,
|
|
10697
|
+
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10698
|
+
_ref$activeSections = _ref.activeSections,
|
|
10699
|
+
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10700
|
+
_ref$sectionsColor = _ref.sectionsColor,
|
|
10701
|
+
sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
|
|
10702
|
+
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10703
|
+
activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
|
|
10704
|
+
_ref$text = _ref.text,
|
|
10705
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10706
|
+
_ref$textColor = _ref.textColor,
|
|
10707
|
+
textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
|
|
10708
|
+
_ref$strengthLabel = _ref.strengthLabel,
|
|
10709
|
+
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10710
|
+
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10711
|
+
strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
|
|
10712
|
+
|
|
10713
|
+
var setSectionColor = function setSectionColor(index) {
|
|
10714
|
+
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10715
|
+
};
|
|
10716
|
+
|
|
10717
|
+
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10718
|
+
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10719
|
+
};
|
|
10720
|
+
|
|
10721
|
+
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10722
|
+
"data-testid": "password-strength-container"
|
|
10723
|
+
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10724
|
+
"data-testid": "password-strength-sections"
|
|
10725
|
+
}, Array.from({
|
|
10726
|
+
length: sections
|
|
10727
|
+
}, function (_section, i) {
|
|
10728
|
+
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10729
|
+
key: i,
|
|
10730
|
+
color: setSectionColor(i),
|
|
10731
|
+
"data-testid": setSectionDataTestId(i)
|
|
10732
|
+
});
|
|
10733
|
+
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10734
|
+
color: textColor,
|
|
10735
|
+
"data-testid": "password-strength-text"
|
|
10736
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10737
|
+
level: 6
|
|
10738
|
+
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10739
|
+
color: strengthLabelColor,
|
|
10740
|
+
"data-testid": "password-strength-label"
|
|
10741
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10742
|
+
level: 2
|
|
10743
|
+
}, strengthLabel))));
|
|
10744
|
+
};
|
|
10745
|
+
|
|
10746
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$N, _templateObject4$C, _templateObject5$v;
|
|
10747
|
+
var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10748
|
+
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);
|
|
10749
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject3$N || (_templateObject3$N = /*#__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);
|
|
10750
|
+
var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$C || (_templateObject4$C = /*#__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) {
|
|
10540
10751
|
var isActive = _ref.isActive;
|
|
10541
10752
|
return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
10542
10753
|
}, Colors.MidGrey);
|
|
10543
|
-
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$
|
|
10754
|
+
var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$v || (_templateObject5$v = /*#__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) {
|
|
10544
10755
|
var isOpen = _ref2.isOpen;
|
|
10545
10756
|
return isOpen ? 'block' : 'none';
|
|
10546
10757
|
}, Colors.White, Colors.DarkGrey, MenuItem$1);
|
|
@@ -10710,106 +10921,8 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10710
10921
|
});
|
|
10711
10922
|
};
|
|
10712
10923
|
|
|
10713
|
-
var _templateObject$
|
|
10714
|
-
var
|
|
10715
|
-
var Sections = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10716
|
-
var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10717
|
-
var color = _ref.color;
|
|
10718
|
-
return "var(--base-color-" + color + ")";
|
|
10719
|
-
});
|
|
10720
|
-
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"])));
|
|
10721
|
-
var Text = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10722
|
-
var color = _ref2.color;
|
|
10723
|
-
return "var(--base-color-" + color + ")";
|
|
10724
|
-
});
|
|
10725
|
-
var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10726
|
-
var color = _ref3.color;
|
|
10727
|
-
return "var(--base-color-" + color + ")";
|
|
10728
|
-
});
|
|
10729
|
-
|
|
10730
|
-
/**
|
|
10731
|
-
* Password strength indicator component.
|
|
10732
|
-
* This renders some number of lines (6 by default)
|
|
10733
|
-
* which should become active when the user improves
|
|
10734
|
-
* the strength of the entered password.
|
|
10735
|
-
*
|
|
10736
|
-
* ## Sections
|
|
10737
|
-
* To set number of sections it should be passed
|
|
10738
|
-
* as `sections` prop.
|
|
10739
|
-
*
|
|
10740
|
-
* ## Active section
|
|
10741
|
-
* To set number of active sections it should be passed
|
|
10742
|
-
* as `activeSections` prop.
|
|
10743
|
-
*
|
|
10744
|
-
* ## Colors
|
|
10745
|
-
* Color of every element can be controlled by properties:
|
|
10746
|
-
* `sectionsColor`, `activeSectionsColor`,
|
|
10747
|
-
* `textColor`, `strengthLabelColor`.
|
|
10748
|
-
*
|
|
10749
|
-
* ## Text
|
|
10750
|
-
* `text` prop is used to render some message.
|
|
10751
|
-
* For example error (together with proper red color)
|
|
10752
|
-
* or some password requirement. It can be empty.
|
|
10753
|
-
*
|
|
10754
|
-
* ## Strength label
|
|
10755
|
-
* `strengthLabel` prop is used to render strength characteristic
|
|
10756
|
-
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10757
|
-
* It can be empty.
|
|
10758
|
-
*/
|
|
10759
|
-
|
|
10760
|
-
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10761
|
-
var _ref$sections = _ref.sections,
|
|
10762
|
-
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10763
|
-
_ref$activeSections = _ref.activeSections,
|
|
10764
|
-
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10765
|
-
_ref$sectionsColor = _ref.sectionsColor,
|
|
10766
|
-
sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
|
|
10767
|
-
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10768
|
-
activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
|
|
10769
|
-
_ref$text = _ref.text,
|
|
10770
|
-
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10771
|
-
_ref$textColor = _ref.textColor,
|
|
10772
|
-
textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
|
|
10773
|
-
_ref$strengthLabel = _ref.strengthLabel,
|
|
10774
|
-
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10775
|
-
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10776
|
-
strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
|
|
10777
|
-
|
|
10778
|
-
var setSectionColor = function setSectionColor(index) {
|
|
10779
|
-
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10780
|
-
};
|
|
10781
|
-
|
|
10782
|
-
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10783
|
-
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10784
|
-
};
|
|
10785
|
-
|
|
10786
|
-
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10787
|
-
"data-testid": "password-strength-container"
|
|
10788
|
-
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10789
|
-
"data-testid": "password-strength-sections"
|
|
10790
|
-
}, Array.from({
|
|
10791
|
-
length: sections
|
|
10792
|
-
}, function (_section, i) {
|
|
10793
|
-
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10794
|
-
key: i,
|
|
10795
|
-
color: setSectionColor(i),
|
|
10796
|
-
"data-testid": setSectionDataTestId(i)
|
|
10797
|
-
});
|
|
10798
|
-
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10799
|
-
color: textColor,
|
|
10800
|
-
"data-testid": "password-strength-text"
|
|
10801
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10802
|
-
level: 6
|
|
10803
|
-
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10804
|
-
color: strengthLabelColor,
|
|
10805
|
-
"data-testid": "password-strength-label"
|
|
10806
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10807
|
-
level: 2
|
|
10808
|
-
}, strengthLabel))));
|
|
10809
|
-
};
|
|
10810
|
-
|
|
10811
|
-
var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10812
|
-
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10924
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10925
|
+
var TableContainer = /*#__PURE__*/styled.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10813
10926
|
var Container$6 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10814
10927
|
var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10815
10928
|
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 border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
|
|
@@ -11092,8 +11205,8 @@ var LiveChat = function LiveChat() {
|
|
|
11092
11205
|
});
|
|
11093
11206
|
};
|
|
11094
11207
|
|
|
11095
|
-
var _templateObject$
|
|
11096
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
11208
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
11209
|
+
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);
|
|
11097
11210
|
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) {
|
|
11098
11211
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
11099
11212
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
@@ -11122,8 +11235,8 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11122
11235
|
}, children)));
|
|
11123
11236
|
};
|
|
11124
11237
|
|
|
11125
|
-
var _templateObject$
|
|
11126
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
11238
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$P, _templateObject4$E;
|
|
11239
|
+
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);
|
|
11127
11240
|
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);
|
|
11128
11241
|
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11129
11242
|
var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$E || (_templateObject4$E = /*#__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"])));
|
|
@@ -11246,8 +11359,73 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
11246
11359
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
11247
11360
|
};
|
|
11248
11361
|
|
|
11249
|
-
var _templateObject$
|
|
11250
|
-
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) {
|
|
11362
|
+
var _templateObject$1n, _templateObject2$$;
|
|
11363
|
+
var FiltersWrapper = /*#__PURE__*/styled.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n column-gap: 24px;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n row-gap: 18px;\n }\n"])), devices.mobileAndTablet);
|
|
11364
|
+
var FilterItemsWrapper = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n row-gap: 12px;\n"])));
|
|
11365
|
+
|
|
11366
|
+
/**
|
|
11367
|
+
* A FilterToggles component that renders a labelled group of toggle buttons
|
|
11368
|
+
* for filtering page content.
|
|
11369
|
+
*
|
|
11370
|
+
* # Usage
|
|
11371
|
+
* This component is designed to be used within a filter context, where multiple items
|
|
11372
|
+
* can be toggled on or off. The parent component should handle the toggling and filtering logic.
|
|
11373
|
+
* toggling logic and state should be passed to filter Toggles as onclickHandler and selectedItems props.
|
|
11374
|
+
*
|
|
11375
|
+
* # Props
|
|
11376
|
+
* - `filterItems`: Array of filter items to be displayed as toggle buttons. Each item should
|
|
11377
|
+
* be an object with a param string, label string, and disableIfActive array containing
|
|
11378
|
+
* params of items to be untoggled when the given item is toggled on.
|
|
11379
|
+
* - `onClickHandler`: Function to handle the click event on each toggle button.
|
|
11380
|
+
* - `selectedItems`: Array of selected filter item parameters. Likely to be a piece of state
|
|
11381
|
+
* mutated by onClickHandler in the parent component.
|
|
11382
|
+
* - `title`: String for the title of the filter section.
|
|
11383
|
+
*
|
|
11384
|
+
* # Design and Accessibility
|
|
11385
|
+
* - aria-labelledby is used to associate the filter section with a label.
|
|
11386
|
+
* - The component is designed to be keyboard-navigable.
|
|
11387
|
+
*/
|
|
11388
|
+
|
|
11389
|
+
var FilterToggles = function FilterToggles(_ref) {
|
|
11390
|
+
var filterItems = _ref.filterItems,
|
|
11391
|
+
onClickHandler = _ref.onClickHandler,
|
|
11392
|
+
_ref$selectedItems = _ref.selectedItems,
|
|
11393
|
+
selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
|
|
11394
|
+
_ref$title = _ref.title,
|
|
11395
|
+
title = _ref$title === void 0 ? 'Filter' : _ref$title;
|
|
11396
|
+
|
|
11397
|
+
var onFilterItemClick = function onFilterItemClick(filter) {
|
|
11398
|
+
return onClickHandler(filter);
|
|
11399
|
+
};
|
|
11400
|
+
|
|
11401
|
+
var onKeyDownHandler = function onKeyDownHandler(e, filterItem) {
|
|
11402
|
+
if (e.key === 'Enter') onFilterItemClick(filterItem);
|
|
11403
|
+
};
|
|
11404
|
+
|
|
11405
|
+
var isFilterSelected = function isFilterSelected(filterItem) {
|
|
11406
|
+
return selectedItems.includes(filterItem.param);
|
|
11407
|
+
};
|
|
11408
|
+
|
|
11409
|
+
var ariaLabelledBy = "filter-label-" + generateDomElementId();
|
|
11410
|
+
return /*#__PURE__*/React__default.createElement(FiltersWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
11411
|
+
level: 1,
|
|
11412
|
+
id: ariaLabelledBy
|
|
11413
|
+
}, title), /*#__PURE__*/React__default.createElement(FilterItemsWrapper, null,
|
|
11414
|
+
/* eslint-disable react/no-array-index-key */
|
|
11415
|
+
filterItems.map(function (filterItem, index) {
|
|
11416
|
+
return /*#__PURE__*/React__default.createElement(ToggleButton, {
|
|
11417
|
+
key: "filter-item-" + index,
|
|
11418
|
+
isToggleOn: isFilterSelected(filterItem),
|
|
11419
|
+
onFilterItemClick: onFilterItemClick,
|
|
11420
|
+
onKeyDownHandler: onKeyDownHandler,
|
|
11421
|
+
item: filterItem,
|
|
11422
|
+
ariaLabelledBy: ariaLabelledBy
|
|
11423
|
+
});
|
|
11424
|
+
})));
|
|
11425
|
+
};
|
|
11426
|
+
|
|
11427
|
+
var _templateObject$1o;
|
|
11428
|
+
var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1o || (_templateObject$1o = /*#__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) {
|
|
11251
11429
|
var theme = _ref.theme;
|
|
11252
11430
|
return theme.colors.primary;
|
|
11253
11431
|
}, function (_ref2) {
|
|
@@ -12188,5 +12366,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
|
|
|
12188
12366
|
return theme.fonts.tablet.sizes.body[1];
|
|
12189
12367
|
}, devices.desktop, devices.largeDesktop);
|
|
12190
12368
|
|
|
12191
|
-
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, IInformationBackgroundColour, 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, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
12369
|
+
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, FilterToggles, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, IInformationBackgroundColour, 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, ToggleButton, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
|
|
12192
12370
|
//# sourceMappingURL=chord.esm.js.map
|