@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
|
@@ -2997,7 +2997,39 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$a || (_templateO
|
|
|
2997
2997
|
});
|
|
2998
2998
|
|
|
2999
2999
|
var _templateObject$b;
|
|
3000
|
-
|
|
3000
|
+
/**
|
|
3001
|
+
* # IMPORTANT
|
|
3002
|
+
* Please use the `<GridItem />` component instead of this component if possible.
|
|
3003
|
+
* This component was introduced due to incompatibilities between versions of the Chord library.
|
|
3004
|
+
*/
|
|
3005
|
+
|
|
3006
|
+
var GridItemLegacy = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", " / span\n ", ";\n\n @media ", " {\n & {\n grid-column: ", " /\n span ", ";\n }\n }\n\n @media ", " {\n & {\n grid-column: ", " / span\n ", ";\n }\n }\n"])), function (_ref) {
|
|
3007
|
+
var columnStartDesktop = _ref.columnStartDesktop;
|
|
3008
|
+
return columnStartDesktop;
|
|
3009
|
+
}, function (_ref2) {
|
|
3010
|
+
var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
|
|
3011
|
+
columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
|
|
3012
|
+
return columnSpanDesktop;
|
|
3013
|
+
}, devices.mobile, function (_ref3) {
|
|
3014
|
+
var columnStartDevice = _ref3.columnStartDevice,
|
|
3015
|
+
columnStartSmallDevice = _ref3.columnStartSmallDevice;
|
|
3016
|
+
return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
|
|
3017
|
+
}, function (_ref4) {
|
|
3018
|
+
var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
|
|
3019
|
+
columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
|
|
3020
|
+
columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
|
|
3021
|
+
return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
|
|
3022
|
+
}, devices.tablet, function (_ref5) {
|
|
3023
|
+
var columnStartDevice = _ref5.columnStartDevice;
|
|
3024
|
+
return columnStartDevice;
|
|
3025
|
+
}, function (_ref6) {
|
|
3026
|
+
var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
|
|
3027
|
+
columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
|
|
3028
|
+
return columnSpanDevice;
|
|
3029
|
+
});
|
|
3030
|
+
|
|
3031
|
+
var _templateObject$c;
|
|
3032
|
+
var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
3001
3033
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
3002
3034
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
3003
3035
|
return aspectRatio;
|
|
@@ -3015,8 +3047,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$b
|
|
|
3015
3047
|
return aspectRatio;
|
|
3016
3048
|
});
|
|
3017
3049
|
|
|
3018
|
-
var _templateObject$
|
|
3019
|
-
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3050
|
+
var _templateObject$d, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5;
|
|
3051
|
+
var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
|
|
3020
3052
|
var height = _ref.height;
|
|
3021
3053
|
return height ? height + "px" : '6px';
|
|
3022
3054
|
});
|
|
@@ -3099,13 +3131,13 @@ var Progress = function Progress(_ref) {
|
|
|
3099
3131
|
}, renderSteps()));
|
|
3100
3132
|
};
|
|
3101
3133
|
|
|
3102
|
-
var _templateObject$
|
|
3103
|
-
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3134
|
+
var _templateObject$e, _templateObject2$5, _templateObject3$3;
|
|
3135
|
+
var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
|
|
3104
3136
|
var RadioLine = /*#__PURE__*/styled__default.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"])));
|
|
3105
3137
|
var RadioError = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
|
|
3106
3138
|
|
|
3107
|
-
var _templateObject$
|
|
3108
|
-
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3139
|
+
var _templateObject$f;
|
|
3140
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
|
|
3109
3141
|
var typography = _ref.typography;
|
|
3110
3142
|
return typography;
|
|
3111
3143
|
}, function (_ref2) {
|
|
@@ -3153,11 +3185,13 @@ var StyledTag = function StyledTag(_ref) {
|
|
|
3153
3185
|
var tag = _ref.tag,
|
|
3154
3186
|
typography = _ref.typography,
|
|
3155
3187
|
children = _ref.children,
|
|
3156
|
-
level = _ref.level
|
|
3188
|
+
level = _ref.level,
|
|
3189
|
+
id = _ref.id;
|
|
3157
3190
|
return /*#__PURE__*/React__default.createElement(Wrapper$1, {
|
|
3158
3191
|
typography: typography,
|
|
3159
3192
|
as: tag,
|
|
3160
|
-
level: level
|
|
3193
|
+
level: level,
|
|
3194
|
+
id: id
|
|
3161
3195
|
}, children);
|
|
3162
3196
|
};
|
|
3163
3197
|
var AltHeader = function AltHeader(_ref2) {
|
|
@@ -3198,12 +3232,14 @@ var Overline = function Overline(_ref5) {
|
|
|
3198
3232
|
var level = _ref5.level,
|
|
3199
3233
|
children = _ref5.children,
|
|
3200
3234
|
_ref5$tag = _ref5.tag,
|
|
3201
|
-
tag = _ref5$tag === void 0 ? 'div' : _ref5$tag
|
|
3235
|
+
tag = _ref5$tag === void 0 ? 'div' : _ref5$tag,
|
|
3236
|
+
id = _ref5.id;
|
|
3202
3237
|
var renderedTag = tag;
|
|
3203
3238
|
return /*#__PURE__*/React__default.createElement(StyledTag, {
|
|
3204
3239
|
tag: renderedTag,
|
|
3205
3240
|
typography: "overline",
|
|
3206
|
-
level: level
|
|
3241
|
+
level: level,
|
|
3242
|
+
id: id
|
|
3207
3243
|
}, children);
|
|
3208
3244
|
};
|
|
3209
3245
|
var Subtitle = function Subtitle(_ref6) {
|
|
@@ -3262,8 +3298,8 @@ var Radio = function Radio(_ref) {
|
|
|
3262
3298
|
}, error)));
|
|
3263
3299
|
};
|
|
3264
3300
|
|
|
3265
|
-
var _templateObject$
|
|
3266
|
-
var Container = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3301
|
+
var _templateObject$g, _templateObject2$6, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
|
|
3302
|
+
var Container = /*#__PURE__*/styled__default.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
3267
3303
|
var Radio$1 = /*#__PURE__*/styled__default.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) {
|
|
3268
3304
|
var error = _ref.error,
|
|
3269
3305
|
darkMode = _ref.darkMode,
|
|
@@ -3371,8 +3407,8 @@ var Radio2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3371
3407
|
}, error)));
|
|
3372
3408
|
});
|
|
3373
3409
|
|
|
3374
|
-
var _templateObject$
|
|
3375
|
-
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3410
|
+
var _templateObject$h, _templateObject2$7, _templateObject3$5;
|
|
3411
|
+
var ButtonsContainer = /*#__PURE__*/styled__default.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
|
|
3376
3412
|
var IconWrapper$1 = /*#__PURE__*/styled__default.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) {
|
|
3377
3413
|
var theme = _ref.theme;
|
|
3378
3414
|
return theme.colors.primary;
|
|
@@ -3443,8 +3479,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
|
|
|
3443
3479
|
}, renderNextIcon()));
|
|
3444
3480
|
};
|
|
3445
3481
|
|
|
3446
|
-
var _templateObject$
|
|
3447
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$
|
|
3482
|
+
var _templateObject$i;
|
|
3483
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
3448
3484
|
var fillColor = _ref.fillColor;
|
|
3449
3485
|
return fillColor;
|
|
3450
3486
|
});
|
|
@@ -3468,8 +3504,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
|
|
|
3468
3504
|
})));
|
|
3469
3505
|
};
|
|
3470
3506
|
|
|
3471
|
-
var _templateObject$
|
|
3472
|
-
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
3507
|
+
var _templateObject$j, _templateObject2$8;
|
|
3508
|
+
var SectionSplitterContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
|
|
3473
3509
|
var Splitter = /*#__PURE__*/styled__default.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
|
|
3474
3510
|
|
|
3475
3511
|
var SectionSplitter = function SectionSplitter(_ref) {
|
|
@@ -3488,8 +3524,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
|
|
|
3488
3524
|
}, /*#__PURE__*/React__default.createElement(Splitter, null)));
|
|
3489
3525
|
};
|
|
3490
3526
|
|
|
3491
|
-
var _templateObject$
|
|
3492
|
-
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3527
|
+
var _templateObject$k;
|
|
3528
|
+
var SponsorLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
|
|
3493
3529
|
|
|
3494
3530
|
var SponsorLogo = function SponsorLogo(_ref) {
|
|
3495
3531
|
var _ref$colorLogo = _ref.colorLogo,
|
|
@@ -3699,8 +3735,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
|
|
|
3699
3735
|
})))));
|
|
3700
3736
|
};
|
|
3701
3737
|
|
|
3702
|
-
var _templateObject$
|
|
3703
|
-
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$
|
|
3738
|
+
var _templateObject$l, _templateObject2$9;
|
|
3739
|
+
var CustomImage = /*#__PURE__*/styled__default.img(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
|
|
3704
3740
|
var SponsorshipStyledIframe = /*#__PURE__*/styled__default.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);
|
|
3705
3741
|
|
|
3706
3742
|
var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
|
|
@@ -3733,8 +3769,8 @@ var Sponsorship = function Sponsorship(_ref) {
|
|
|
3733
3769
|
}));
|
|
3734
3770
|
};
|
|
3735
3771
|
|
|
3736
|
-
var _templateObject$
|
|
3737
|
-
var TabText = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3772
|
+
var _templateObject$m, _templateObject2$a;
|
|
3773
|
+
var TabText = /*#__PURE__*/styled__default.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
|
|
3738
3774
|
if (props.withIcon === 'left') {
|
|
3739
3775
|
return "margin-left: 5px;";
|
|
3740
3776
|
}
|
|
@@ -3833,8 +3869,8 @@ var Tab = function Tab(_ref) {
|
|
|
3833
3869
|
}));
|
|
3834
3870
|
};
|
|
3835
3871
|
|
|
3836
|
-
var _templateObject$
|
|
3837
|
-
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
3872
|
+
var _templateObject$n, _templateObject2$b;
|
|
3873
|
+
var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
|
|
3838
3874
|
var iconName = _ref.iconName;
|
|
3839
3875
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
|
|
3840
3876
|
}, function (_ref2) {
|
|
@@ -3885,8 +3921,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
3885
3921
|
})) : null, children);
|
|
3886
3922
|
};
|
|
3887
3923
|
|
|
3888
|
-
var _templateObject$
|
|
3889
|
-
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
3924
|
+
var _templateObject$o, _templateObject2$c, _templateObject3$6, _templateObject4$3;
|
|
3925
|
+
var TextAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
|
|
3890
3926
|
var width = _ref.width;
|
|
3891
3927
|
return width ? width + "px;" : '100%;';
|
|
3892
3928
|
}, function (_ref2) {
|
|
@@ -4009,8 +4045,8 @@ var TextArea = function TextArea(_ref) {
|
|
|
4009
4045
|
}, error))));
|
|
4010
4046
|
};
|
|
4011
4047
|
|
|
4012
|
-
var _templateObject$
|
|
4013
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4048
|
+
var _templateObject$p, _templateObject2$d, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
|
|
4049
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4014
4050
|
var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
|
|
4015
4051
|
var width = _ref.width;
|
|
4016
4052
|
if (!width) return 'none';
|
|
@@ -4136,8 +4172,8 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4136
4172
|
}, error)));
|
|
4137
4173
|
});
|
|
4138
4174
|
|
|
4139
|
-
var _templateObject$
|
|
4140
|
-
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4175
|
+
var _templateObject$q, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$3;
|
|
4176
|
+
var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4141
4177
|
var textStyles = /*#__PURE__*/styled.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) {
|
|
4142
4178
|
var theme = _ref.theme;
|
|
4143
4179
|
return theme.fonts.desktop.weights.body[1];
|
|
@@ -4210,8 +4246,8 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
|
|
|
4210
4246
|
}, error) : null);
|
|
4211
4247
|
};
|
|
4212
4248
|
|
|
4213
|
-
var _templateObject$
|
|
4214
|
-
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$
|
|
4249
|
+
var _templateObject$r, _templateObject2$f;
|
|
4250
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
4215
4251
|
var iconName = _ref.iconName;
|
|
4216
4252
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
4217
4253
|
}, function (_ref2) {
|
|
@@ -4247,8 +4283,8 @@ var TextLogoProduct;
|
|
|
4247
4283
|
TextLogoProduct["Cinema"] = "CINEMA";
|
|
4248
4284
|
})(TextLogoProduct || (TextLogoProduct = {}));
|
|
4249
4285
|
|
|
4250
|
-
var _templateObject$
|
|
4251
|
-
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4286
|
+
var _templateObject$s, _templateObject2$g, _templateObject3$9, _templateObject4$6;
|
|
4287
|
+
var TickboxError = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4252
4288
|
var dark = _ref.dark;
|
|
4253
4289
|
return dark ? 'white' : 'errorstate';
|
|
4254
4290
|
});
|
|
@@ -4369,8 +4405,8 @@ var Tickbox = function Tickbox(_ref) {
|
|
|
4369
4405
|
}, error)));
|
|
4370
4406
|
};
|
|
4371
4407
|
|
|
4372
|
-
var _templateObject$
|
|
4373
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4408
|
+
var _templateObject$t, _templateObject2$h, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2;
|
|
4409
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
4374
4410
|
var Tickbox$1 = /*#__PURE__*/styled__default.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
|
|
4375
4411
|
var error = _ref.error,
|
|
4376
4412
|
darkMode = _ref.darkMode,
|
|
@@ -4480,8 +4516,8 @@ var Tickbox2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
4480
4516
|
}, error)));
|
|
4481
4517
|
});
|
|
4482
4518
|
|
|
4483
|
-
var _templateObject$
|
|
4484
|
-
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
4519
|
+
var _templateObject$u, _templateObject2$i, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
|
|
4520
|
+
var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
|
|
4485
4521
|
var color = _ref.color;
|
|
4486
4522
|
return color;
|
|
4487
4523
|
});
|
|
@@ -4589,8 +4625,8 @@ var Timer = function Timer(_ref) {
|
|
|
4589
4625
|
}));
|
|
4590
4626
|
};
|
|
4591
4627
|
|
|
4592
|
-
var _templateObject$
|
|
4593
|
-
var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
4628
|
+
var _templateObject$v;
|
|
4629
|
+
var TypeTagsContainer = /*#__PURE__*/styled__default.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"])));
|
|
4594
4630
|
|
|
4595
4631
|
var TypeTags = function TypeTags(_ref) {
|
|
4596
4632
|
var list = _ref.list;
|
|
@@ -5332,8 +5368,8 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
|
|
|
5332
5368
|
}
|
|
5333
5369
|
});
|
|
5334
5370
|
|
|
5335
|
-
var _templateObject$
|
|
5336
|
-
var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$
|
|
5371
|
+
var _templateObject$w, _templateObject2$j, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
|
|
5372
|
+
var VideoPlayButton = /*#__PURE__*/styled__default.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"])));
|
|
5337
5373
|
var VideoFullscreenButton = /*#__PURE__*/styled__default.button(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
|
|
5338
5374
|
var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
|
|
5339
5375
|
var VideoControlsInnerWrapper = /*#__PURE__*/styled__default.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"])));
|
|
@@ -5552,8 +5588,8 @@ var VideoControls = function VideoControls(_ref2) {
|
|
|
5552
5588
|
})));
|
|
5553
5589
|
};
|
|
5554
5590
|
|
|
5555
|
-
var _templateObject$
|
|
5556
|
-
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5591
|
+
var _templateObject$x, _templateObject2$k, _templateObject3$d, _templateObject4$a, _templateObject5$7;
|
|
5592
|
+
var StepperWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
|
|
5557
5593
|
var StepperError = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
|
|
5558
5594
|
var darkMode = _ref.darkMode;
|
|
5559
5595
|
return darkMode ? 'white' : 'errorstate';
|
|
@@ -5780,8 +5816,70 @@ var Component = function Component(_ref) {
|
|
|
5780
5816
|
}, error)));
|
|
5781
5817
|
};
|
|
5782
5818
|
|
|
5783
|
-
var _templateObject$
|
|
5784
|
-
var
|
|
5819
|
+
var _templateObject$y;
|
|
5820
|
+
var colors$1 = core.colors;
|
|
5821
|
+
var Tile = /*#__PURE__*/styled__default.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) {
|
|
5822
|
+
var isSelected = _ref.isSelected;
|
|
5823
|
+
return isSelected ? colors$1.midgrey : colors$1.lightgrey;
|
|
5824
|
+
}, function (_ref2) {
|
|
5825
|
+
var isSelected = _ref2.isSelected;
|
|
5826
|
+
return !isSelected && 'none';
|
|
5827
|
+
}, devices.mobileAndTablet);
|
|
5828
|
+
|
|
5829
|
+
/**
|
|
5830
|
+
* A ToggleButton component that renders a toggleable button with an icon and label.
|
|
5831
|
+
*
|
|
5832
|
+
* # Usage
|
|
5833
|
+
* The primary use case this component was written for is to be used within a group of
|
|
5834
|
+
* toggles for filtering content displayed on page. One such implementation can be found in
|
|
5835
|
+
* Filter Toggles component. However, this component can be used anywhere a toggle
|
|
5836
|
+
* button is needed.
|
|
5837
|
+
* Toggle Button requires the toggling logic to be handled by the parent component
|
|
5838
|
+
* and passed down to it as isToggleOn, onFilterItemClick, and onKeyDownHandler props.
|
|
5839
|
+
*
|
|
5840
|
+
* # Props
|
|
5841
|
+
* - `isToggleOn`: Boolean indicating if the toggle is on.
|
|
5842
|
+
* - `onFilterItemClick`: Function to handle the click event on the toggle button.
|
|
5843
|
+
* - `onKeyDownHandler`: Function to handle the keydown event on the toggle button.
|
|
5844
|
+
* - `item`: Object representing the item associated with the toggle button.
|
|
5845
|
+
* - `ariaLabelledBy`: Recommended when used as part of a group of toggles under a common
|
|
5846
|
+
* label or title. A string which should be identical to the id of the label or title.
|
|
5847
|
+
*
|
|
5848
|
+
* # Design and Accessibility
|
|
5849
|
+
* - aria-labelledby is used to associate the toggle button with a label or title when
|
|
5850
|
+
* used as part of a group of toggles.
|
|
5851
|
+
* - The component is designed to be keyboard-navigable.
|
|
5852
|
+
* - aria-selected is used to indicate the selected state of the toggle button.
|
|
5853
|
+
*/
|
|
5854
|
+
|
|
5855
|
+
var ToggleButton = function ToggleButton(_ref) {
|
|
5856
|
+
var isToggleOn = _ref.isToggleOn,
|
|
5857
|
+
onFilterItemClick = _ref.onFilterItemClick,
|
|
5858
|
+
onKeyDownHandler = _ref.onKeyDownHandler,
|
|
5859
|
+
item = _ref.item,
|
|
5860
|
+
ariaLabelledBy = _ref.ariaLabelledBy;
|
|
5861
|
+
return /*#__PURE__*/React__default.createElement(Tile, {
|
|
5862
|
+
isSelected: isToggleOn,
|
|
5863
|
+
onClick: function onClick() {
|
|
5864
|
+
return onFilterItemClick(item);
|
|
5865
|
+
},
|
|
5866
|
+
onKeyDown: function onKeyDown(e) {
|
|
5867
|
+
return onKeyDownHandler(e, item);
|
|
5868
|
+
},
|
|
5869
|
+
tabIndex: 0,
|
|
5870
|
+
"aria-labelledby": ariaLabelledBy,
|
|
5871
|
+
"aria-selected": isToggleOn,
|
|
5872
|
+
role: 'checkbox'
|
|
5873
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
5874
|
+
color: exports.Colors.Black,
|
|
5875
|
+
iconName: "Confirm"
|
|
5876
|
+
}), /*#__PURE__*/React__default.createElement(BodyText, {
|
|
5877
|
+
level: 1
|
|
5878
|
+
}, item.label));
|
|
5879
|
+
};
|
|
5880
|
+
|
|
5881
|
+
var _templateObject$z, _templateObject2$l, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
|
|
5882
|
+
var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
|
|
5785
5883
|
var isMenuOpen = _ref.isMenuOpen;
|
|
5786
5884
|
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 ";
|
|
5787
5885
|
});
|
|
@@ -5805,8 +5903,8 @@ var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_temp
|
|
|
5805
5903
|
var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
|
|
5806
5904
|
var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
|
|
5807
5905
|
|
|
5808
|
-
var _templateObject$
|
|
5809
|
-
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5906
|
+
var _templateObject$A;
|
|
5907
|
+
var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
|
|
5810
5908
|
|
|
5811
5909
|
var Logo = function Logo(_ref) {
|
|
5812
5910
|
var _ref$id = _ref.id,
|
|
@@ -5838,11 +5936,11 @@ var Logo = function Logo(_ref) {
|
|
|
5838
5936
|
}))));
|
|
5839
5937
|
};
|
|
5840
5938
|
|
|
5841
|
-
var _templateObject$
|
|
5842
|
-
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5939
|
+
var _templateObject$B;
|
|
5940
|
+
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
5843
5941
|
|
|
5844
|
-
var _templateObject$
|
|
5845
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
5942
|
+
var _templateObject$C, _templateObject2$m, _templateObject3$f, _templateObject4$c;
|
|
5943
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
|
|
5846
5944
|
var selected = _ref.selected,
|
|
5847
5945
|
colorPrimary = _ref.colorPrimary;
|
|
5848
5946
|
|
|
@@ -6031,8 +6129,8 @@ var Basket$1 = function Basket(_ref) {
|
|
|
6031
6129
|
}, expiryTime ? basketText : text) : ''));
|
|
6032
6130
|
};
|
|
6033
6131
|
|
|
6034
|
-
var _templateObject$
|
|
6035
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6132
|
+
var _templateObject$D, _templateObject2$n;
|
|
6133
|
+
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
6036
6134
|
var selected = _ref.selected,
|
|
6037
6135
|
colorPrimary = _ref.colorPrimary;
|
|
6038
6136
|
|
|
@@ -6324,8 +6422,8 @@ var NavTop = function NavTop(_ref) {
|
|
|
6324
6422
|
}));
|
|
6325
6423
|
};
|
|
6326
6424
|
|
|
6327
|
-
var _templateObject$
|
|
6328
|
-
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6425
|
+
var _templateObject$E, _templateObject2$o, _templateObject3$g, _templateObject4$d;
|
|
6426
|
+
var TabsContainer = /*#__PURE__*/styled__default.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
|
|
6329
6427
|
var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
|
|
6330
6428
|
if (props.showMenu) {
|
|
6331
6429
|
return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
|
|
@@ -6467,8 +6565,8 @@ var Tabs = function Tabs(_ref) {
|
|
|
6467
6565
|
}, "MENU"))));
|
|
6468
6566
|
};
|
|
6469
6567
|
|
|
6470
|
-
var _templateObject$
|
|
6471
|
-
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6568
|
+
var _templateObject$F, _templateObject2$p, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
|
|
6569
|
+
var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 64px;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n background-color: var(--base-color-transparent);\n\n @media ", " {\n column-gap: 12px;\n }\n"])), devices.mobile);
|
|
6472
6570
|
var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
|
|
6473
6571
|
var SvgContainerClose = /*#__PURE__*/styled__default.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"])));
|
|
6474
6572
|
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
|
|
@@ -6705,16 +6803,16 @@ var Navigation = function Navigation(_ref) {
|
|
|
6705
6803
|
})))));
|
|
6706
6804
|
};
|
|
6707
6805
|
|
|
6708
|
-
var _templateObject$
|
|
6709
|
-
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$
|
|
6806
|
+
var _templateObject$G, _templateObject2$q, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
|
|
6807
|
+
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
6710
6808
|
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n --footer-vertical-spacing-sm\n )\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
6711
6809
|
var PolicyLinksRow = /*#__PURE__*/styled__default.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);
|
|
6712
6810
|
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
6713
6811
|
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
6714
6812
|
var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
|
|
6715
6813
|
|
|
6716
|
-
var _templateObject$
|
|
6717
|
-
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$
|
|
6814
|
+
var _templateObject$H, _templateObject2$r, _templateObject3$j;
|
|
6815
|
+
var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 auto;\n padding: 0;\n list-style: none;\n display: flex;\n gap: var(--footer-items-gap);\n\n @media ", " {\n & {\n margin: 0;\n flex-direction: column;\n }\n }\n"])), devices.mobile);
|
|
6718
6816
|
var PolicyLinkItem = /*#__PURE__*/styled__default.li(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
|
|
6719
6817
|
var PolicyLink = /*#__PURE__*/styled__default.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"])));
|
|
6720
6818
|
|
|
@@ -6732,8 +6830,8 @@ var PolicyLinks = function PolicyLinks(_ref) {
|
|
|
6732
6830
|
}));
|
|
6733
6831
|
};
|
|
6734
6832
|
|
|
6735
|
-
var _templateObject$
|
|
6736
|
-
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6833
|
+
var _templateObject$I, _templateObject2$s, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
|
|
6834
|
+
var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n grid-template-rows: 100px;\n gap: 0;\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content min-content;\n gap: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
|
|
6737
6835
|
var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2;\n justify-self: center;\n height: 100%;\n border: 1px solid var(--base-color-white);\n\n @media ", " {\n & {\n grid-column: auto;\n display: none;\n }\n }\n"])), devices.mobile);
|
|
6738
6836
|
var SignUpWrapper = /*#__PURE__*/styled__default.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);
|
|
6739
6837
|
var SignUpText = /*#__PURE__*/styled__default.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);
|
|
@@ -6804,9 +6902,9 @@ var Footer = function Footer(_ref) {
|
|
|
6804
6902
|
}, additionalInfo)))));
|
|
6805
6903
|
};
|
|
6806
6904
|
|
|
6807
|
-
var _templateObject$
|
|
6905
|
+
var _templateObject$J, _templateObject2$t, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9;
|
|
6808
6906
|
var LIST_ITEM_GAP = 32;
|
|
6809
|
-
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
6907
|
+
var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
6810
6908
|
var bottomBorder = _ref.bottomBorder;
|
|
6811
6909
|
return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
|
|
6812
6910
|
}, zIndexes.anchor);
|
|
@@ -7070,8 +7168,8 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
7070
7168
|
})) : null) : null))));
|
|
7071
7169
|
};
|
|
7072
7170
|
|
|
7073
|
-
var _templateObject$
|
|
7074
|
-
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7171
|
+
var _templateObject$K, _templateObject2$u, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
|
|
7172
|
+
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
7075
7173
|
var sticky = _ref.sticky;
|
|
7076
7174
|
return sticky ? 'sticky' : 'initial';
|
|
7077
7175
|
}, zIndexes.anchor);
|
|
@@ -7131,8 +7229,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
7131
7229
|
}, message)));
|
|
7132
7230
|
};
|
|
7133
7231
|
|
|
7134
|
-
var _templateObject$
|
|
7135
|
-
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7232
|
+
var _templateObject$L, _templateObject2$v, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
|
|
7233
|
+
var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-lightgrey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
|
|
7136
7234
|
var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
|
|
7137
7235
|
var PromoLabel = /*#__PURE__*/styled__default.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) {
|
|
7138
7236
|
var theme = _ref.theme;
|
|
@@ -7212,8 +7310,8 @@ var UpsellCard = function UpsellCard(_ref) {
|
|
|
7212
7310
|
}), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
|
|
7213
7311
|
};
|
|
7214
7312
|
|
|
7215
|
-
var _templateObject$
|
|
7216
|
-
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7313
|
+
var _templateObject$M;
|
|
7314
|
+
var Wrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
|
|
7217
7315
|
|
|
7218
7316
|
var UpsellCards = function UpsellCards(_ref) {
|
|
7219
7317
|
var upsellCards = _ref.upsellCards;
|
|
@@ -7231,16 +7329,16 @@ var UpsellCards = function UpsellCards(_ref) {
|
|
|
7231
7329
|
}));
|
|
7232
7330
|
};
|
|
7233
7331
|
|
|
7234
|
-
var _templateObject$
|
|
7235
|
-
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7332
|
+
var _templateObject$N, _templateObject2$w, _templateObject3$o;
|
|
7333
|
+
var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
|
|
7236
7334
|
var theme = _ref.theme;
|
|
7237
7335
|
return theme.colors.primary;
|
|
7238
7336
|
}, devices.mobile, devices.tablet);
|
|
7239
7337
|
var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
|
|
7240
7338
|
var TextContainer = /*#__PURE__*/styled__default.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);
|
|
7241
7339
|
|
|
7242
|
-
var _templateObject$
|
|
7243
|
-
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7340
|
+
var _templateObject$O, _templateObject2$x, _templateObject3$p, _templateObject4$j, _templateObject5$e, _templateObject6$c;
|
|
7341
|
+
var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
|
|
7244
7342
|
var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
|
|
7245
7343
|
var ChildrenContainer = /*#__PURE__*/styled__default.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) {
|
|
7246
7344
|
var isVisible = _ref.isVisible;
|
|
@@ -7368,8 +7466,8 @@ var Accordion = function Accordion(_ref) {
|
|
|
7368
7466
|
}, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
|
|
7369
7467
|
};
|
|
7370
7468
|
|
|
7371
|
-
var _templateObject$
|
|
7372
|
-
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7469
|
+
var _templateObject$P;
|
|
7470
|
+
var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
7373
7471
|
|
|
7374
7472
|
var Accordions = function Accordions(_ref) {
|
|
7375
7473
|
var _ref$items = _ref.items,
|
|
@@ -7387,7 +7485,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
7387
7485
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
7388
7486
|
contentType: accordion.contentType,
|
|
7389
7487
|
displayLevel: accordion.displayLevel,
|
|
7390
|
-
semanticLevel: accordion.semanticLevel
|
|
7488
|
+
semanticLevel: accordion.semanticLevel,
|
|
7489
|
+
initOpen: accordion.initOpen
|
|
7391
7490
|
}, accordion.children);
|
|
7392
7491
|
}));
|
|
7393
7492
|
};
|
|
@@ -7401,8 +7500,8 @@ var Theme = function Theme(_ref) {
|
|
|
7401
7500
|
}, children);
|
|
7402
7501
|
};
|
|
7403
7502
|
|
|
7404
|
-
var _templateObject$
|
|
7405
|
-
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7503
|
+
var _templateObject$Q, _templateObject2$y, _templateObject3$q;
|
|
7504
|
+
var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
|
|
7406
7505
|
var theme = _ref.theme;
|
|
7407
7506
|
return theme.colors.primary;
|
|
7408
7507
|
}, devices.mobile);
|
|
@@ -7444,8 +7543,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
|
|
|
7444
7543
|
}))))));
|
|
7445
7544
|
};
|
|
7446
7545
|
|
|
7447
|
-
var _templateObject$
|
|
7448
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
|
|
7546
|
+
var _templateObject$R;
|
|
7547
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
|
|
7449
7548
|
var bgColor = _ref.bgColor,
|
|
7450
7549
|
theme = _ref.theme;
|
|
7451
7550
|
return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
|
|
@@ -7466,11 +7565,11 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
|
7466
7565
|
}), children);
|
|
7467
7566
|
};
|
|
7468
7567
|
|
|
7469
|
-
var _templateObject$
|
|
7568
|
+
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;
|
|
7470
7569
|
var LENGTH_LARGE_TEXT = 28;
|
|
7471
7570
|
var LENGTH_SMALL_TEXT$1 = 19;
|
|
7472
7571
|
var LENGTH_TEXT_TABLET = 10;
|
|
7473
|
-
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7572
|
+
var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
|
|
7474
7573
|
var isCardClickable = _ref.isCardClickable;
|
|
7475
7574
|
return isCardClickable ? 'pointer' : 'default';
|
|
7476
7575
|
}, function (_ref2) {
|
|
@@ -7754,9 +7853,9 @@ var Card = function Card(_ref) {
|
|
|
7754
7853
|
dangerouslySetInnerHTML: {
|
|
7755
7854
|
__html: truncatedText
|
|
7756
7855
|
}
|
|
7757
|
-
}), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7856
|
+
}))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
7758
7857
|
level: 1
|
|
7759
|
-
}, highlightText))
|
|
7858
|
+
}, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
|
|
7760
7859
|
fullWidth: fullWidth
|
|
7761
7860
|
}, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
|
|
7762
7861
|
ref: node,
|
|
@@ -7770,8 +7869,8 @@ var Card = function Card(_ref) {
|
|
|
7770
7869
|
}, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
|
|
7771
7870
|
};
|
|
7772
7871
|
|
|
7773
|
-
var _templateObject$
|
|
7774
|
-
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
7872
|
+
var _templateObject$T, _templateObject2$A;
|
|
7873
|
+
var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
|
|
7775
7874
|
var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
|
|
7776
7875
|
|
|
7777
7876
|
var Cards = function Cards(_ref) {
|
|
@@ -7817,8 +7916,8 @@ var Cards = function Cards(_ref) {
|
|
|
7817
7916
|
}));
|
|
7818
7917
|
};
|
|
7819
7918
|
|
|
7820
|
-
var _templateObject$
|
|
7821
|
-
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7919
|
+
var _templateObject$U, _templateObject2$B, _templateObject3$s, _templateObject4$l, _templateObject5$g;
|
|
7920
|
+
var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
|
|
7822
7921
|
var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
|
|
7823
7922
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
7824
7923
|
return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
|
|
@@ -7886,8 +7985,8 @@ var ContactCard = function ContactCard(_ref) {
|
|
|
7886
7985
|
}, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
|
|
7887
7986
|
};
|
|
7888
7987
|
|
|
7889
|
-
var _templateObject$
|
|
7890
|
-
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$
|
|
7988
|
+
var _templateObject$V, _templateObject2$C, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$e, _templateObject7$8;
|
|
7989
|
+
var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
7891
7990
|
var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
|
|
7892
7991
|
return props.clickable ? 'pointer' : 'default';
|
|
7893
7992
|
}, devices.mobile);
|
|
@@ -7969,8 +8068,8 @@ var ContentSummary = function ContentSummary(_ref) {
|
|
|
7969
8068
|
}), link.text)));
|
|
7970
8069
|
};
|
|
7971
8070
|
|
|
7972
|
-
var _templateObject$
|
|
7973
|
-
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8071
|
+
var _templateObject$W, _templateObject2$D, _templateObject3$u, _templateObject4$n, _templateObject5$i;
|
|
8072
|
+
var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
|
|
7974
8073
|
var imageToLeft = _ref.imageToLeft;
|
|
7975
8074
|
return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
|
|
7976
8075
|
}, devices.mobile);
|
|
@@ -8014,8 +8113,8 @@ var Editorial = function Editorial(_ref) {
|
|
|
8014
8113
|
})))));
|
|
8015
8114
|
};
|
|
8016
8115
|
|
|
8017
|
-
var _templateObject$
|
|
8018
|
-
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$
|
|
8116
|
+
var _templateObject$X, _templateObject2$E, _templateObject3$v, _templateObject4$o, _templateObject5$j;
|
|
8117
|
+
var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
|
|
8019
8118
|
var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
|
|
8020
8119
|
var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
|
|
8021
8120
|
if (!props.infoThemed) {
|
|
@@ -8152,8 +8251,8 @@ var Information = function Information(_ref) {
|
|
|
8152
8251
|
}))));
|
|
8153
8252
|
};
|
|
8154
8253
|
|
|
8155
|
-
var _templateObject$
|
|
8156
|
-
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8254
|
+
var _templateObject$Y, _templateObject2$F, _templateObject3$w, _templateObject4$p, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$7;
|
|
8255
|
+
var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // 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) {
|
|
8157
8256
|
var theme = _ref.theme;
|
|
8158
8257
|
return theme.colors.primary;
|
|
8159
8258
|
}, function (_ref2) {
|
|
@@ -8253,8 +8352,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
|
8253
8352
|
})));
|
|
8254
8353
|
};
|
|
8255
8354
|
|
|
8256
|
-
var _templateObject$
|
|
8257
|
-
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8355
|
+
var _templateObject$Z, _templateObject2$G, _templateObject3$x, _templateObject4$q, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$8;
|
|
8356
|
+
var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
|
|
8258
8357
|
var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
|
|
8259
8358
|
var ImpactGrid = /*#__PURE__*/styled__default(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);
|
|
8260
8359
|
var SponsorWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -8327,8 +8426,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
8327
8426
|
}, "Scroll Down")) : null);
|
|
8328
8427
|
};
|
|
8329
8428
|
|
|
8330
|
-
var _templateObject$
|
|
8331
|
-
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8429
|
+
var _templateObject$_, _templateObject2$H, _templateObject3$y, _templateObject4$r, _templateObject5$m;
|
|
8430
|
+
var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
|
|
8332
8431
|
var color = _ref.color;
|
|
8333
8432
|
return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
|
|
8334
8433
|
}, devices.mobileAndTablet);
|
|
@@ -8372,8 +8471,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
8372
8471
|
}))));
|
|
8373
8472
|
};
|
|
8374
8473
|
|
|
8375
|
-
var _templateObject
|
|
8376
|
-
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject
|
|
8474
|
+
var _templateObject$$;
|
|
8475
|
+
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
8377
8476
|
|
|
8378
8477
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
8379
8478
|
var link = _ref.link,
|
|
@@ -8393,8 +8492,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
|
8393
8492
|
}))));
|
|
8394
8493
|
};
|
|
8395
8494
|
|
|
8396
|
-
var _templateObject$
|
|
8397
|
-
var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8495
|
+
var _templateObject$10, _templateObject2$I, _templateObject3$z, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
|
|
8496
|
+
var BrandingTextBlock = /*#__PURE__*/styled__default.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);
|
|
8398
8497
|
var BrandingTextBody = /*#__PURE__*/styled__default.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"])));
|
|
8399
8498
|
var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
|
|
8400
8499
|
var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.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);
|
|
@@ -8524,7 +8623,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
8524
8623
|
var isIOS = function isIOS() {
|
|
8525
8624
|
try {
|
|
8526
8625
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
8527
|
-
if (typeof navigator === undefined) return false;
|
|
8626
|
+
if (typeof navigator === 'undefined') return false;
|
|
8528
8627
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
8529
8628
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
8530
8629
|
} catch (e) {
|
|
@@ -8540,7 +8639,7 @@ var useIOS = function useIOS() {
|
|
|
8540
8639
|
setIOS = _useState[1];
|
|
8541
8640
|
|
|
8542
8641
|
React.useEffect(function () {
|
|
8543
|
-
if (typeof navigator === undefined) return;
|
|
8642
|
+
if (typeof navigator === 'undefined') return;
|
|
8544
8643
|
setIOS(isIOS());
|
|
8545
8644
|
}, []);
|
|
8546
8645
|
return IOS;
|
|
@@ -8726,8 +8825,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
8726
8825
|
}), linkText))));
|
|
8727
8826
|
};
|
|
8728
8827
|
|
|
8729
|
-
var _templateObject
|
|
8730
|
-
var MorePages = /*#__PURE__*/styled__default.span(_templateObject
|
|
8828
|
+
var _templateObject$11, _templateObject2$J, _templateObject3$A, _templateObject4$s;
|
|
8829
|
+
var MorePages = /*#__PURE__*/styled__default.span(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
|
|
8731
8830
|
var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
|
|
8732
8831
|
|
|
8733
8832
|
var PageNumber = /*#__PURE__*/styled__default.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) {
|
|
@@ -8803,8 +8902,8 @@ var Pagination = function Pagination(_ref) {
|
|
|
8803
8902
|
}))));
|
|
8804
8903
|
};
|
|
8805
8904
|
|
|
8806
|
-
var _templateObject$
|
|
8807
|
-
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
8905
|
+
var _templateObject$12, _templateObject2$K, _templateObject3$B, _templateObject4$t, _templateObject5$o, _templateObject6$i;
|
|
8906
|
+
var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
|
|
8808
8907
|
var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
|
|
8809
8908
|
var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
|
|
8810
8909
|
var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
|
|
@@ -8860,11 +8959,14 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
8860
8959
|
}));
|
|
8861
8960
|
};
|
|
8862
8961
|
|
|
8863
|
-
var _templateObject$
|
|
8864
|
-
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8865
|
-
var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])))
|
|
8866
|
-
var
|
|
8867
|
-
|
|
8962
|
+
var _templateObject$13, _templateObject2$L, _templateObject3$C, _templateObject4$u;
|
|
8963
|
+
var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
8964
|
+
var CreditListingWrapper = /*#__PURE__*/styled__default(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) {
|
|
8965
|
+
var columnCount = _ref.columnCount;
|
|
8966
|
+
return "repeat(" + columnCount + ", 1fr)";
|
|
8967
|
+
}, devices.mobile, devices.tablet);
|
|
8968
|
+
var DescriptionWrapper = /*#__PURE__*/styled__default.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"])));
|
|
8969
|
+
var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
8868
8970
|
|
|
8869
8971
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
8870
8972
|
return array.reduce(function (acc, item) {
|
|
@@ -8875,19 +8977,29 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
8875
8977
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
8876
8978
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
8877
8979
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
8878
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
8980
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
8981
|
+
key: index
|
|
8982
|
+
}, title));
|
|
8879
8983
|
} else if (index > 0) {
|
|
8880
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8984
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8985
|
+
key: index
|
|
8986
|
+
}, ", ", title);
|
|
8881
8987
|
}
|
|
8882
8988
|
|
|
8883
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
8989
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
8990
|
+
key: index
|
|
8991
|
+
}, title);
|
|
8884
8992
|
}));
|
|
8885
8993
|
};
|
|
8886
8994
|
|
|
8887
8995
|
var CreditListing = function CreditListing(_ref) {
|
|
8888
|
-
var roles = _ref.roles
|
|
8996
|
+
var roles = _ref.roles,
|
|
8997
|
+
_ref$columnCount = _ref.columnCount,
|
|
8998
|
+
columnCount = _ref$columnCount === void 0 ? 4 : _ref$columnCount;
|
|
8889
8999
|
var charThreshold = 180;
|
|
8890
|
-
return /*#__PURE__*/React__default.createElement(CreditListingWrapper,
|
|
9000
|
+
return /*#__PURE__*/React__default.createElement(CreditListingWrapper, {
|
|
9001
|
+
columnCount: columnCount
|
|
9002
|
+
}, roles.map(function (_ref2, index) {
|
|
8891
9003
|
var name = _ref2.name,
|
|
8892
9004
|
people = _ref2.people,
|
|
8893
9005
|
description = _ref2.description,
|
|
@@ -8896,9 +9008,10 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8896
9008
|
additionalInfo = _ref2.additionalInfo,
|
|
8897
9009
|
dataROH = _ref2.dataROH;
|
|
8898
9010
|
var namesLength = getConcatenatedPropLength(people, 'name');
|
|
9011
|
+
var columnSpanDesktop = namesLength > charThreshold ? people.length > 2 ? 4 : 2 : 1;
|
|
8899
9012
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
8900
|
-
columnSpanDesktop:
|
|
8901
|
-
columnSpanDevice:
|
|
9013
|
+
columnSpanDesktop: columnSpanDesktop,
|
|
9014
|
+
columnSpanDevice: columnSpanDesktop,
|
|
8902
9015
|
columnSpanSmallDevice: 2,
|
|
8903
9016
|
key: name + "-" + index
|
|
8904
9017
|
}, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
|
|
@@ -8932,14 +9045,14 @@ var CreditListing = function CreditListing(_ref) {
|
|
|
8932
9045
|
}));
|
|
8933
9046
|
};
|
|
8934
9047
|
|
|
8935
|
-
var _templateObject$
|
|
9048
|
+
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;
|
|
8936
9049
|
var LENGTH_TEXT = 28;
|
|
8937
9050
|
var LENGTH_TEXT_TABLET$1 = 12;
|
|
8938
9051
|
var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
|
|
8939
9052
|
var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
|
|
8940
9053
|
var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
|
|
8941
9054
|
var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
|
|
8942
|
-
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9055
|
+
var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
|
|
8943
9056
|
var imageToLeft = _ref.imageToLeft;
|
|
8944
9057
|
return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
|
|
8945
9058
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9210,10 +9323,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
9210
9323
|
}))));
|
|
9211
9324
|
};
|
|
9212
9325
|
|
|
9213
|
-
var _templateObject$
|
|
9326
|
+
var _templateObject$15, _templateObject2$N, _templateObject3$E, _templateObject4$w, _templateObject5$q, _templateObject6$k, _templateObject7$d;
|
|
9214
9327
|
var LENGTH_TEXT$2 = 28;
|
|
9215
9328
|
var LENGTH_TEXT_TABLET$2 = 10;
|
|
9216
|
-
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$
|
|
9329
|
+
var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
|
|
9217
9330
|
var imageToLeft = _ref.imageToLeft;
|
|
9218
9331
|
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'";
|
|
9219
9332
|
}, devices.tablet, function (_ref2) {
|
|
@@ -9266,8 +9379,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
9266
9379
|
return '';
|
|
9267
9380
|
});
|
|
9268
9381
|
|
|
9269
|
-
var _templateObject$
|
|
9270
|
-
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9382
|
+
var _templateObject$16;
|
|
9383
|
+
var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
|
|
9271
9384
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
9272
9385
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
9273
9386
|
return aspectRatio;
|
|
@@ -9471,8 +9584,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
9471
9584
|
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
|
|
9472
9585
|
};
|
|
9473
9586
|
|
|
9474
|
-
var _templateObject$
|
|
9475
|
-
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9587
|
+
var _templateObject$17;
|
|
9588
|
+
var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
|
|
9476
9589
|
|
|
9477
9590
|
/**
|
|
9478
9591
|
* DEPRECATED. Use RadioGroup2 instead
|
|
@@ -9530,8 +9643,8 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
9530
9643
|
})));
|
|
9531
9644
|
};
|
|
9532
9645
|
|
|
9533
|
-
var _templateObject$
|
|
9534
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9646
|
+
var _templateObject$18, _templateObject2$O, _templateObject3$F;
|
|
9647
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
9535
9648
|
var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
|
|
9536
9649
|
var horizontalMode = _ref.horizontalMode;
|
|
9537
9650
|
if (horizontalMode) return 'row';
|
|
@@ -9620,8 +9733,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
|
|
|
9620
9733
|
}, error)));
|
|
9621
9734
|
};
|
|
9622
9735
|
|
|
9623
|
-
var _templateObject$
|
|
9624
|
-
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9736
|
+
var _templateObject$19, _templateObject2$P, _templateObject3$G;
|
|
9737
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
9625
9738
|
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
9626
9739
|
var SvgContainer$3 = /*#__PURE__*/styled__default.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);
|
|
9627
9740
|
|
|
@@ -9685,8 +9798,8 @@ var StatusBanner = function StatusBanner(_ref) {
|
|
|
9685
9798
|
})))));
|
|
9686
9799
|
};
|
|
9687
9800
|
|
|
9688
|
-
var _templateObject$
|
|
9689
|
-
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
9801
|
+
var _templateObject$1a;
|
|
9802
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
9690
9803
|
|
|
9691
9804
|
var SectionTitle = function SectionTitle(_ref) {
|
|
9692
9805
|
var title = _ref.title,
|
|
@@ -9714,8 +9827,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
9714
9827
|
}, description))));
|
|
9715
9828
|
};
|
|
9716
9829
|
|
|
9717
|
-
var _templateObject$
|
|
9718
|
-
var stateStyles = /*#__PURE__*/styled.css(_templateObject$
|
|
9830
|
+
var _templateObject$1b, _templateObject2$Q, _templateObject3$H, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
|
|
9831
|
+
var stateStyles = /*#__PURE__*/styled.css(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
9719
9832
|
var theme = _ref.theme;
|
|
9720
9833
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
9721
9834
|
}, function (_ref2) {
|
|
@@ -10137,8 +10250,8 @@ function Select(_ref3) {
|
|
|
10137
10250
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
10138
10251
|
}
|
|
10139
10252
|
|
|
10140
|
-
var _templateObject$
|
|
10141
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10253
|
+
var _templateObject$1c, _templateObject2$R, _templateObject3$I, _templateObject4$y;
|
|
10254
|
+
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
10142
10255
|
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
10143
10256
|
var width = _ref.width;
|
|
10144
10257
|
if (!width) return 'none';
|
|
@@ -10277,8 +10390,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
10277
10390
|
})));
|
|
10278
10391
|
};
|
|
10279
10392
|
|
|
10280
|
-
var _templateObject$
|
|
10281
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10393
|
+
var _templateObject$1d;
|
|
10394
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
10282
10395
|
var theme = _ref.theme;
|
|
10283
10396
|
return theme.colors.primary;
|
|
10284
10397
|
});
|
|
@@ -10306,8 +10419,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
10306
10419
|
})));
|
|
10307
10420
|
};
|
|
10308
10421
|
|
|
10309
|
-
var _templateObject$
|
|
10310
|
-
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10422
|
+
var _templateObject$1e, _templateObject2$S;
|
|
10423
|
+
var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
10311
10424
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
10312
10425
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
10313
10426
|
return aspectRatio;
|
|
@@ -10355,8 +10468,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
10355
10468
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
10356
10469
|
};
|
|
10357
10470
|
|
|
10358
|
-
var _templateObject$
|
|
10359
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10471
|
+
var _templateObject$1f, _templateObject2$T, _templateObject3$J;
|
|
10472
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
10360
10473
|
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
10361
10474
|
var displayAttribution = _ref.displayAttribution;
|
|
10362
10475
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
@@ -10385,8 +10498,8 @@ var Quote = function Quote(_ref) {
|
|
|
10385
10498
|
}, attribution))));
|
|
10386
10499
|
};
|
|
10387
10500
|
|
|
10388
|
-
var _templateObject$
|
|
10389
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10501
|
+
var _templateObject$1g, _templateObject2$U, _templateObject3$K, _templateObject4$z, _templateObject5$s, _templateObject6$m;
|
|
10502
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
10390
10503
|
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
10391
10504
|
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
10392
10505
|
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
@@ -10429,8 +10542,8 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
10429
10542
|
}, title)))));
|
|
10430
10543
|
};
|
|
10431
10544
|
|
|
10432
|
-
var _templateObject$
|
|
10433
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
10545
|
+
var _templateObject$1h, _templateObject2$V, _templateObject3$L, _templateObject4$A, _templateObject5$t;
|
|
10546
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
10434
10547
|
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
|
|
10435
10548
|
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
|
|
10436
10549
|
var isVisible = _ref.isVisible;
|
|
@@ -10527,15 +10640,113 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
10527
10640
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
10528
10641
|
};
|
|
10529
10642
|
|
|
10530
|
-
var _templateObject$
|
|
10531
|
-
var
|
|
10532
|
-
var
|
|
10533
|
-
var
|
|
10534
|
-
var
|
|
10643
|
+
var _templateObject$1i, _templateObject2$W, _templateObject3$M, _templateObject4$B, _templateObject5$u, _templateObject6$n;
|
|
10644
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
10645
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10646
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10647
|
+
var color = _ref.color;
|
|
10648
|
+
return "var(--base-color-" + color + ")";
|
|
10649
|
+
});
|
|
10650
|
+
var BottomLine = /*#__PURE__*/styled__default.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"])));
|
|
10651
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10652
|
+
var color = _ref2.color;
|
|
10653
|
+
return "var(--base-color-" + color + ")";
|
|
10654
|
+
});
|
|
10655
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10656
|
+
var color = _ref3.color;
|
|
10657
|
+
return "var(--base-color-" + color + ")";
|
|
10658
|
+
});
|
|
10659
|
+
|
|
10660
|
+
/**
|
|
10661
|
+
* Password strength indicator component.
|
|
10662
|
+
* This renders some number of lines (6 by default)
|
|
10663
|
+
* which should become active when the user improves
|
|
10664
|
+
* the strength of the entered password.
|
|
10665
|
+
*
|
|
10666
|
+
* ## Sections
|
|
10667
|
+
* To set number of sections it should be passed
|
|
10668
|
+
* as `sections` prop.
|
|
10669
|
+
*
|
|
10670
|
+
* ## Active section
|
|
10671
|
+
* To set number of active sections it should be passed
|
|
10672
|
+
* as `activeSections` prop.
|
|
10673
|
+
*
|
|
10674
|
+
* ## Colors
|
|
10675
|
+
* Color of every element can be controlled by properties:
|
|
10676
|
+
* `sectionsColor`, `activeSectionsColor`,
|
|
10677
|
+
* `textColor`, `strengthLabelColor`.
|
|
10678
|
+
*
|
|
10679
|
+
* ## Text
|
|
10680
|
+
* `text` prop is used to render some message.
|
|
10681
|
+
* For example error (together with proper red color)
|
|
10682
|
+
* or some password requirement. It can be empty.
|
|
10683
|
+
*
|
|
10684
|
+
* ## Strength label
|
|
10685
|
+
* `strengthLabel` prop is used to render strength characteristic
|
|
10686
|
+
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10687
|
+
* It can be empty.
|
|
10688
|
+
*/
|
|
10689
|
+
|
|
10690
|
+
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10691
|
+
var _ref$sections = _ref.sections,
|
|
10692
|
+
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10693
|
+
_ref$activeSections = _ref.activeSections,
|
|
10694
|
+
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10695
|
+
_ref$sectionsColor = _ref.sectionsColor,
|
|
10696
|
+
sectionsColor = _ref$sectionsColor === void 0 ? exports.Colors.MidGrey : _ref$sectionsColor,
|
|
10697
|
+
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10698
|
+
activeSectionsColor = _ref$activeSectionsCo === void 0 ? exports.Colors.Black : _ref$activeSectionsCo,
|
|
10699
|
+
_ref$text = _ref.text,
|
|
10700
|
+
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10701
|
+
_ref$textColor = _ref.textColor,
|
|
10702
|
+
textColor = _ref$textColor === void 0 ? exports.Colors.Black : _ref$textColor,
|
|
10703
|
+
_ref$strengthLabel = _ref.strengthLabel,
|
|
10704
|
+
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10705
|
+
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10706
|
+
strengthLabelColor = _ref$strengthLabelCol === void 0 ? exports.Colors.Black : _ref$strengthLabelCol;
|
|
10707
|
+
|
|
10708
|
+
var setSectionColor = function setSectionColor(index) {
|
|
10709
|
+
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10710
|
+
};
|
|
10711
|
+
|
|
10712
|
+
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10713
|
+
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10714
|
+
};
|
|
10715
|
+
|
|
10716
|
+
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10717
|
+
"data-testid": "password-strength-container"
|
|
10718
|
+
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10719
|
+
"data-testid": "password-strength-sections"
|
|
10720
|
+
}, Array.from({
|
|
10721
|
+
length: sections
|
|
10722
|
+
}, function (_section, i) {
|
|
10723
|
+
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10724
|
+
key: i,
|
|
10725
|
+
color: setSectionColor(i),
|
|
10726
|
+
"data-testid": setSectionDataTestId(i)
|
|
10727
|
+
});
|
|
10728
|
+
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10729
|
+
color: textColor,
|
|
10730
|
+
"data-testid": "password-strength-text"
|
|
10731
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10732
|
+
level: 6
|
|
10733
|
+
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10734
|
+
color: strengthLabelColor,
|
|
10735
|
+
"data-testid": "password-strength-label"
|
|
10736
|
+
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10737
|
+
level: 2
|
|
10738
|
+
}, strengthLabel))));
|
|
10739
|
+
};
|
|
10740
|
+
|
|
10741
|
+
var _templateObject$1j, _templateObject2$X, _templateObject3$N, _templateObject4$C, _templateObject5$v;
|
|
10742
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
10743
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
|
|
10744
|
+
var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
|
|
10745
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
|
|
10535
10746
|
var isActive = _ref.isActive;
|
|
10536
10747
|
return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
10537
10748
|
}, exports.Colors.MidGrey);
|
|
10538
|
-
var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$
|
|
10749
|
+
var MobileMenuList = /*#__PURE__*/styled__default.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) {
|
|
10539
10750
|
var isOpen = _ref2.isOpen;
|
|
10540
10751
|
return isOpen ? 'block' : 'none';
|
|
10541
10752
|
}, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
|
|
@@ -10705,106 +10916,8 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
|
|
|
10705
10916
|
});
|
|
10706
10917
|
};
|
|
10707
10918
|
|
|
10708
|
-
var _templateObject$
|
|
10709
|
-
var
|
|
10710
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
10711
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
10712
|
-
var color = _ref.color;
|
|
10713
|
-
return "var(--base-color-" + color + ")";
|
|
10714
|
-
});
|
|
10715
|
-
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
10716
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
10717
|
-
var color = _ref2.color;
|
|
10718
|
-
return "var(--base-color-" + color + ")";
|
|
10719
|
-
});
|
|
10720
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
10721
|
-
var color = _ref3.color;
|
|
10722
|
-
return "var(--base-color-" + color + ")";
|
|
10723
|
-
});
|
|
10724
|
-
|
|
10725
|
-
/**
|
|
10726
|
-
* Password strength indicator component.
|
|
10727
|
-
* This renders some number of lines (6 by default)
|
|
10728
|
-
* which should become active when the user improves
|
|
10729
|
-
* the strength of the entered password.
|
|
10730
|
-
*
|
|
10731
|
-
* ## Sections
|
|
10732
|
-
* To set number of sections it should be passed
|
|
10733
|
-
* as `sections` prop.
|
|
10734
|
-
*
|
|
10735
|
-
* ## Active section
|
|
10736
|
-
* To set number of active sections it should be passed
|
|
10737
|
-
* as `activeSections` prop.
|
|
10738
|
-
*
|
|
10739
|
-
* ## Colors
|
|
10740
|
-
* Color of every element can be controlled by properties:
|
|
10741
|
-
* `sectionsColor`, `activeSectionsColor`,
|
|
10742
|
-
* `textColor`, `strengthLabelColor`.
|
|
10743
|
-
*
|
|
10744
|
-
* ## Text
|
|
10745
|
-
* `text` prop is used to render some message.
|
|
10746
|
-
* For example error (together with proper red color)
|
|
10747
|
-
* or some password requirement. It can be empty.
|
|
10748
|
-
*
|
|
10749
|
-
* ## Strength label
|
|
10750
|
-
* `strengthLabel` prop is used to render strength characteristic
|
|
10751
|
-
* of entered password. For example: `weak`, `normal`, `strong`, etc.
|
|
10752
|
-
* It can be empty.
|
|
10753
|
-
*/
|
|
10754
|
-
|
|
10755
|
-
var PasswordStrength = function PasswordStrength(_ref) {
|
|
10756
|
-
var _ref$sections = _ref.sections,
|
|
10757
|
-
sections = _ref$sections === void 0 ? 6 : _ref$sections,
|
|
10758
|
-
_ref$activeSections = _ref.activeSections,
|
|
10759
|
-
activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
|
|
10760
|
-
_ref$sectionsColor = _ref.sectionsColor,
|
|
10761
|
-
sectionsColor = _ref$sectionsColor === void 0 ? exports.Colors.MidGrey : _ref$sectionsColor,
|
|
10762
|
-
_ref$activeSectionsCo = _ref.activeSectionsColor,
|
|
10763
|
-
activeSectionsColor = _ref$activeSectionsCo === void 0 ? exports.Colors.Black : _ref$activeSectionsCo,
|
|
10764
|
-
_ref$text = _ref.text,
|
|
10765
|
-
text = _ref$text === void 0 ? '' : _ref$text,
|
|
10766
|
-
_ref$textColor = _ref.textColor,
|
|
10767
|
-
textColor = _ref$textColor === void 0 ? exports.Colors.Black : _ref$textColor,
|
|
10768
|
-
_ref$strengthLabel = _ref.strengthLabel,
|
|
10769
|
-
strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
|
|
10770
|
-
_ref$strengthLabelCol = _ref.strengthLabelColor,
|
|
10771
|
-
strengthLabelColor = _ref$strengthLabelCol === void 0 ? exports.Colors.Black : _ref$strengthLabelCol;
|
|
10772
|
-
|
|
10773
|
-
var setSectionColor = function setSectionColor(index) {
|
|
10774
|
-
return index < activeSections ? activeSectionsColor : sectionsColor;
|
|
10775
|
-
};
|
|
10776
|
-
|
|
10777
|
-
var setSectionDataTestId = function setSectionDataTestId(index) {
|
|
10778
|
-
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
10779
|
-
};
|
|
10780
|
-
|
|
10781
|
-
return /*#__PURE__*/React__default.createElement(Container$5, {
|
|
10782
|
-
"data-testid": "password-strength-container"
|
|
10783
|
-
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
10784
|
-
"data-testid": "password-strength-sections"
|
|
10785
|
-
}, Array.from({
|
|
10786
|
-
length: sections
|
|
10787
|
-
}, function (_section, i) {
|
|
10788
|
-
return /*#__PURE__*/React__default.createElement(Section, {
|
|
10789
|
-
key: i,
|
|
10790
|
-
color: setSectionColor(i),
|
|
10791
|
-
"data-testid": setSectionDataTestId(i)
|
|
10792
|
-
});
|
|
10793
|
-
})), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
|
|
10794
|
-
color: textColor,
|
|
10795
|
-
"data-testid": "password-strength-text"
|
|
10796
|
-
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
10797
|
-
level: 6
|
|
10798
|
-
}, text)), /*#__PURE__*/React__default.createElement(LabelText, {
|
|
10799
|
-
color: strengthLabelColor,
|
|
10800
|
-
"data-testid": "password-strength-label"
|
|
10801
|
-
}, /*#__PURE__*/React__default.createElement(Overline, {
|
|
10802
|
-
level: 2
|
|
10803
|
-
}, strengthLabel))));
|
|
10804
|
-
};
|
|
10805
|
-
|
|
10806
|
-
var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10807
|
-
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10919
|
+
var _templateObject$1k, _templateObject2$Y, _templateObject3$O, _templateObject4$D, _templateObject5$w, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
|
|
10920
|
+
var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
|
|
10808
10921
|
var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
|
|
10809
10922
|
var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
10810
10923
|
var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n 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) {
|
|
@@ -11087,8 +11200,8 @@ var LiveChat = function LiveChat() {
|
|
|
11087
11200
|
});
|
|
11088
11201
|
};
|
|
11089
11202
|
|
|
11090
|
-
var _templateObject$
|
|
11091
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11203
|
+
var _templateObject$1l, _templateObject2$Z;
|
|
11204
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
11092
11205
|
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
11093
11206
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
11094
11207
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
@@ -11117,8 +11230,8 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11117
11230
|
}, children)));
|
|
11118
11231
|
};
|
|
11119
11232
|
|
|
11120
|
-
var _templateObject$
|
|
11121
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11233
|
+
var _templateObject$1m, _templateObject2$_, _templateObject3$P, _templateObject4$E;
|
|
11234
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
11122
11235
|
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
11123
11236
|
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11124
11237
|
var Overlay = /*#__PURE__*/styled__default(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"])));
|
|
@@ -11241,8 +11354,73 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
11241
11354
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
11242
11355
|
};
|
|
11243
11356
|
|
|
11244
|
-
var _templateObject$
|
|
11245
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
11357
|
+
var _templateObject$1n, _templateObject2$$;
|
|
11358
|
+
var FiltersWrapper = /*#__PURE__*/styled__default.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);
|
|
11359
|
+
var FilterItemsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n row-gap: 12px;\n"])));
|
|
11360
|
+
|
|
11361
|
+
/**
|
|
11362
|
+
* A FilterToggles component that renders a labelled group of toggle buttons
|
|
11363
|
+
* for filtering page content.
|
|
11364
|
+
*
|
|
11365
|
+
* # Usage
|
|
11366
|
+
* This component is designed to be used within a filter context, where multiple items
|
|
11367
|
+
* can be toggled on or off. The parent component should handle the toggling and filtering logic.
|
|
11368
|
+
* toggling logic and state should be passed to filter Toggles as onclickHandler and selectedItems props.
|
|
11369
|
+
*
|
|
11370
|
+
* # Props
|
|
11371
|
+
* - `filterItems`: Array of filter items to be displayed as toggle buttons. Each item should
|
|
11372
|
+
* be an object with a param string, label string, and disableIfActive array containing
|
|
11373
|
+
* params of items to be untoggled when the given item is toggled on.
|
|
11374
|
+
* - `onClickHandler`: Function to handle the click event on each toggle button.
|
|
11375
|
+
* - `selectedItems`: Array of selected filter item parameters. Likely to be a piece of state
|
|
11376
|
+
* mutated by onClickHandler in the parent component.
|
|
11377
|
+
* - `title`: String for the title of the filter section.
|
|
11378
|
+
*
|
|
11379
|
+
* # Design and Accessibility
|
|
11380
|
+
* - aria-labelledby is used to associate the filter section with a label.
|
|
11381
|
+
* - The component is designed to be keyboard-navigable.
|
|
11382
|
+
*/
|
|
11383
|
+
|
|
11384
|
+
var FilterToggles = function FilterToggles(_ref) {
|
|
11385
|
+
var filterItems = _ref.filterItems,
|
|
11386
|
+
onClickHandler = _ref.onClickHandler,
|
|
11387
|
+
_ref$selectedItems = _ref.selectedItems,
|
|
11388
|
+
selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
|
|
11389
|
+
_ref$title = _ref.title,
|
|
11390
|
+
title = _ref$title === void 0 ? 'Filter' : _ref$title;
|
|
11391
|
+
|
|
11392
|
+
var onFilterItemClick = function onFilterItemClick(filter) {
|
|
11393
|
+
return onClickHandler(filter);
|
|
11394
|
+
};
|
|
11395
|
+
|
|
11396
|
+
var onKeyDownHandler = function onKeyDownHandler(e, filterItem) {
|
|
11397
|
+
if (e.key === 'Enter') onFilterItemClick(filterItem);
|
|
11398
|
+
};
|
|
11399
|
+
|
|
11400
|
+
var isFilterSelected = function isFilterSelected(filterItem) {
|
|
11401
|
+
return selectedItems.includes(filterItem.param);
|
|
11402
|
+
};
|
|
11403
|
+
|
|
11404
|
+
var ariaLabelledBy = "filter-label-" + generateDomElementId();
|
|
11405
|
+
return /*#__PURE__*/React__default.createElement(FiltersWrapper, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
11406
|
+
level: 1,
|
|
11407
|
+
id: ariaLabelledBy
|
|
11408
|
+
}, title), /*#__PURE__*/React__default.createElement(FilterItemsWrapper, null,
|
|
11409
|
+
/* eslint-disable react/no-array-index-key */
|
|
11410
|
+
filterItems.map(function (filterItem, index) {
|
|
11411
|
+
return /*#__PURE__*/React__default.createElement(ToggleButton, {
|
|
11412
|
+
key: "filter-item-" + index,
|
|
11413
|
+
isToggleOn: isFilterSelected(filterItem),
|
|
11414
|
+
onFilterItemClick: onFilterItemClick,
|
|
11415
|
+
onKeyDownHandler: onKeyDownHandler,
|
|
11416
|
+
item: filterItem,
|
|
11417
|
+
ariaLabelledBy: ariaLabelledBy
|
|
11418
|
+
});
|
|
11419
|
+
})));
|
|
11420
|
+
};
|
|
11421
|
+
|
|
11422
|
+
var _templateObject$1o;
|
|
11423
|
+
var GlobalStyles = /*#__PURE__*/styled.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) {
|
|
11246
11424
|
var theme = _ref.theme;
|
|
11247
11425
|
return theme.colors.primary;
|
|
11248
11426
|
}, function (_ref2) {
|
|
@@ -12199,10 +12377,12 @@ exports.ContentSummary = ContentSummary;
|
|
|
12199
12377
|
exports.ControlledDropdown = ControlledDropdown;
|
|
12200
12378
|
exports.CreditListing = CreditListing;
|
|
12201
12379
|
exports.Editorial = Editorial;
|
|
12380
|
+
exports.FilterToggles = FilterToggles;
|
|
12202
12381
|
exports.Footer = Footer;
|
|
12203
12382
|
exports.GlobalStyles = GlobalStyles;
|
|
12204
12383
|
exports.Grid = Grid;
|
|
12205
12384
|
exports.GridItem = GridItem;
|
|
12385
|
+
exports.GridItemLegacy = GridItemLegacy;
|
|
12206
12386
|
exports.Header = Header;
|
|
12207
12387
|
exports.Icon = Icon;
|
|
12208
12388
|
exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
|
|
@@ -12262,6 +12442,7 @@ exports.Tickbox = Tickbox;
|
|
|
12262
12442
|
exports.Tickbox2 = Tickbox2;
|
|
12263
12443
|
exports.Timer = Timer;
|
|
12264
12444
|
exports.TitleWithCTA = TitleWithCTA;
|
|
12445
|
+
exports.ToggleButton = ToggleButton;
|
|
12265
12446
|
exports.TypeTags = TypeTags;
|
|
12266
12447
|
exports.UpsellCard = UpsellCard;
|
|
12267
12448
|
exports.UpsellSection = UpsellSection;
|