@royaloperahouse/chord 2.2.3 → 2.2.5

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/dist/chord.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { createElement, memo, useRef, useCallback, useEffect, useState } from 'react';
1
+ import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef } from 'react';
2
2
  import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
3
3
  import moment from 'moment';
4
4
  import { renderToString } from 'react-dom/server';
@@ -3407,111 +3407,133 @@ var TextArea = function TextArea(_ref) {
3407
3407
  }, error))));
3408
3408
  };
3409
3409
 
3410
- var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3, _templateObject5$1;
3411
- var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3412
- var textStyles = /*#__PURE__*/css(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
3413
- var theme = _ref.theme;
3414
- return theme.fonts.desktop.weights.body[1];
3415
- }, function (_ref2) {
3416
- var theme = _ref2.theme;
3417
- return theme.fonts.desktop.sizes.altHeaders[6];
3418
- }, function (_ref3) {
3419
- var theme = _ref3.theme;
3420
- return theme.spacing[7];
3410
+ var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3, _templateObject5$1, _templateObject6;
3411
+ var Container = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3412
+ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
3413
+ var width = _ref.width;
3414
+ if (!width) return 'none';
3415
+ return width + 'px';
3421
3416
  });
3422
- var Input = /*#__PURE__*/styled.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n width: ", ";\n height: 48px;\n padding: 0px 20px;\n\n border: 1px solid ", ";\n outline: none;\n\n ", "\n\n :disabled {\n background-color: ", ";\n border: 1px solid transparent;\n outline: none;\n }\n\n :focus {\n outline: ", "};\n }\n"])), textStyles, function (_ref4) {
3423
- var width = _ref4.width;
3424
- return width ? width + 'px' : '196px';
3425
- }, function (_ref5) {
3426
- var theme = _ref5.theme;
3427
- return theme.colors.darkgrey;
3428
- }, function (_ref6) {
3429
- var error = _ref6.error,
3430
- theme = _ref6.theme;
3431
- if (!error) return;
3432
- return "\n border: 1px solid " + theme.colors.error + ";\n ";
3433
- }, function (_ref7) {
3434
- var theme = _ref7.theme;
3435
- return theme.colors.lightgrey;
3436
- }, function (_ref8) {
3437
- var darkMode = _ref8.darkMode,
3438
- theme = _ref8.theme;
3439
- if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
3440
- return "3px solid " + theme.colors.lapisLazuli;
3417
+ var Input = /*#__PURE__*/styled.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\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 width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3418
+ var isPasswordField = _ref2.isPasswordField;
3419
+ if (isPasswordField) return "80px";
3420
+ return "20px";
3421
+ }, function (_ref3) {
3422
+ var error = _ref3.error;
3423
+ if (error !== undefined) return "1px solid var(--base-color-errorstate)";
3424
+ return "1px solid var(--base-color-darkgrey)";
3425
+ }, function (_ref4) {
3426
+ var darkMode = _ref4.darkMode;
3427
+ if (darkMode) return "4px solid var(--base-color-lemonchiffon)";
3428
+ return "3px solid var(--base-color-lapislazuli)";
3441
3429
  });
3442
- var TextLabel = /*#__PURE__*/styled.p(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref9) {
3443
- var darkMode = _ref9.darkMode,
3444
- theme = _ref9.theme;
3445
- return darkMode ? theme.colors.white : theme.colors.black;
3430
+ var ShowHideButton = /*#__PURE__*/styled.button(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 53px;\n top: 50%;\n margin-top: calc(var(--line-height-overline-1) / 2 * -1);\n right: 20px;\n border: none;\n background: none;\n padding: 0;\n display: block;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n"])));
3431
+ var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n color: ", ";\n"])), function (_ref5) {
3432
+ var darkMode = _ref5.darkMode;
3433
+ if (darkMode) return "var(--base-color-white)";
3434
+ return "var(--base-color-black)";
3446
3435
  });
3447
- var ErrorLabel = /*#__PURE__*/styled.p(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n color: ", ";\n"])), textStyles, function (_ref10) {
3448
- var darkMode = _ref10.darkMode,
3449
- theme = _ref10.theme;
3450
- return darkMode ? theme.colors.white : theme.colors.error;
3436
+ var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref6) {
3437
+ var darkMode = _ref6.darkMode;
3438
+ if (darkMode) return "var(--base-color-white)";
3439
+ return "var(--base-color-errorstate)";
3451
3440
  });
3452
3441
 
3453
- var _excluded$6 = ["label", "error", "darkMode", "width"];
3442
+ var _excluded$6 = ["label", "type", "error", "darkMode", "width"];
3454
3443
  /**
3455
3444
  * A text field component, that wraps around the native `<input />` element
3456
- * and adds some extra information around it (i.e. a text label and an error label).
3445
+ * and adds some extra states and information around it (i.e. a text and an error labels,
3446
+ * error state, show/hide button for password field).
3457
3447
  *
3458
- * # Labels
3448
+ * # Label
3459
3449
  * You can use this component just like you would use a regular `<input />` element,
3460
3450
  * just with the extra `label` prop, to set the label of the content. For example:
3461
3451
  * ```tsx
3462
3452
  * <TextField label="This is a label" />
3463
3453
  * ```
3464
3454
  *
3465
- * **IMPORTANT!** If you want to render a `<TextField />` without a label, you will
3466
- * have to make the label an empty string:
3467
- * ```tsx
3468
- * <TextField label='' />
3469
- * ```
3455
+ * # Error state
3456
+ * An error label will be shown below the text input field if the `error` prop exists.
3457
+ * Also input will be rendered with a red border. An empty string can be passed to
3458
+ * render only error state without error message.
3470
3459
  *
3471
- * This is not recommended, as it makes the input non-accessible - all `<TextField />`s should
3472
- * have a label.
3460
+ * # Password mode
3461
+ * If type `password` provided this will be rendered with the `Show/Hide` button over the input field.
3462
+ * Clicking on that changes type to `text` and back to `password`.
3473
3463
  *
3474
3464
  * # Light / Dark mode
3475
3465
  * The component can also adapt its styles for light / dark mode. If you want this component
3476
3466
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
3477
3467
  * ```tsx
3478
3468
  * <div>
3479
- * <WhiteBackgroundContainer>
3480
- * <TextField label="..." />
3481
- * </WhiteBackgroundContainer>
3482
- *
3483
- * <BlackBackgroundContainer>
3484
- * <TextField darkMode label="..." />
3485
- * </BlackBackgroundContainer>
3486
- * <BlueBackgroundContainer>
3487
- * <TextField darkMode label="..." />
3488
- * </BlueBackgroundContainer>
3469
+ * <WhiteBackgroundContainer>
3470
+ * <TextField label="..." />
3471
+ * </WhiteBackgroundContainer>
3472
+ * <BlackBackgroundContainer>
3473
+ * <TextField darkMode label="..." />
3474
+ * </BlackBackgroundContainer>
3475
+ * <BlueBackgroundContainer>
3476
+ * <TextField darkMode label="..." />
3477
+ * </BlueBackgroundContainer>
3489
3478
  * </div>
3490
3479
  * ```
3491
3480
  */
3492
3481
 
3493
- var TextField = function TextField(_ref) {
3482
+ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
3494
3483
  var label = _ref.label,
3484
+ _ref$type = _ref.type,
3485
+ type = _ref$type === void 0 ? 'text' : _ref$type,
3495
3486
  error = _ref.error,
3496
3487
  _ref$darkMode = _ref.darkMode,
3497
3488
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
3498
3489
  width = _ref.width,
3499
3490
  inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
3500
3491
 
3501
- return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel, {
3492
+ var _useState = useState(false),
3493
+ showPassword = _useState[0],
3494
+ setShowPassword = _useState[1];
3495
+
3496
+ var isPasswordField = type === 'password';
3497
+ var showHideButtonText = showPassword ? 'Hide' : 'Show';
3498
+
3499
+ var inputType = function () {
3500
+ if (type !== 'password') return type;
3501
+ if (showPassword) return 'text';
3502
+ return 'password';
3503
+ }();
3504
+
3505
+ var showHideClickHandler = function showHideClickHandler() {
3506
+ setShowPassword(function (prev) {
3507
+ return !prev;
3508
+ });
3509
+ };
3510
+
3511
+ return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel, {
3502
3512
  darkMode: darkMode,
3503
3513
  "data-testid": "text-field-text-label"
3504
- }, label), /*#__PURE__*/React__default.createElement(Input, Object.assign({
3505
- type: "text",
3514
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
3515
+ level: 6
3516
+ }, label)), /*#__PURE__*/React__default.createElement(InputWrapper, {
3517
+ width: width
3518
+ }, /*#__PURE__*/React__default.createElement(Input, Object.assign({
3519
+ isPasswordField: isPasswordField,
3520
+ type: inputType,
3506
3521
  error: error,
3507
3522
  darkMode: darkMode,
3508
3523
  "data-testid": "text-field-input",
3509
- width: width
3510
- }, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel, {
3524
+ ref: ref
3525
+ }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
3526
+ type: "button",
3527
+ onClick: showHideClickHandler
3528
+ }, /*#__PURE__*/React__default.createElement(Overline, {
3529
+ level: 1
3530
+ }, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel, {
3511
3531
  darkMode: darkMode,
3512
3532
  "data-testid": "text-field-error-label"
3513
- }, error) : null);
3514
- };
3533
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
3534
+ level: 6
3535
+ }, error)));
3536
+ });
3515
3537
 
3516
3538
  var _templateObject$o, _templateObject2$c;
3517
3539
  var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$o || (_templateObject$o = /*#__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) {
@@ -3694,7 +3716,7 @@ var Tickbox = function Tickbox(_ref) {
3694
3716
  }, error)));
3695
3717
  };
3696
3718
 
3697
- var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8;
3719
+ var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6, _templateObject5$2, _templateObject6$1, _templateObject7, _templateObject8;
3698
3720
  var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
3699
3721
  var color = _ref.color;
3700
3722
  return color;
@@ -3706,7 +3728,7 @@ var Line = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /
3706
3728
  var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
3707
3729
  var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
3708
3730
  var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
3709
- var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
3731
+ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
3710
3732
  var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
3711
3733
  var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
3712
3734
 
@@ -3817,13 +3839,13 @@ var TypeTags = function TypeTags(_ref) {
3817
3839
  }));
3818
3840
  };
3819
3841
 
3820
- var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3, _templateObject6$1, _templateObject7$1;
3842
+ var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3, _templateObject6$2, _templateObject7$1;
3821
3843
  var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n"])));
3822
3844
  var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: 50px;\n bottom: 24px;\n display: flex;\n align-items: center;\n @media ", " {\n left: 20px;\n bottom: 12px;\n }\n"])), devices.mobile);
3823
3845
  var VideoVolume = /*#__PURE__*/styled.input(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100px;\n margin-left: 24px;\n"])));
3824
3846
  var VideoMute = /*#__PURE__*/styled.button(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 17px;\n height: 17px;\n background: none;\n border: none;\n padding: 0;\n svg {\n width: 100%;\n height: 100%;\n }\n"])));
3825
3847
  var thumbStyes = /*#__PURE__*/css(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n -webkit-appearance: none;\n appearance: none;\n border: none;\n height: 8px;\n width: 8px;\n border-radius: 50%;\n background: #ffffff;\n border: none;\n transform: translateY(-25%);\n"])));
3826
- var trackStyles = /*#__PURE__*/css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n cursor: pointer;\n height: 4px;\n cursor: pointer;\n background: rgb(241, 241, 241, 0.5);\n border-radius: 1.3px;\n border: none;\n"])));
3848
+ var trackStyles = /*#__PURE__*/css(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n cursor: pointer;\n height: 4px;\n cursor: pointer;\n background: rgb(241, 241, 241, 0.5);\n border-radius: 1.3px;\n border: none;\n"])));
3827
3849
  var VolumeControlsWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n margin: 12px 12px;\n padding: 0;\n background-color: rgb(26, 26, 26, 0.6);\n height: 36px;\n width: ", ";\n align-items: center;\n justify-content: center;\n\n /* Range slider overrides */\n input[type='range' i] {\n -webkit-appearance: none;\n appearance: none;\n width: 42px;\n margin: 0;\n margin-left: 7px;\n background: transparent; /* Otherwise white in Chrome */\n\n ::-webkit-slider-runnable-track {\n ", "\n }\n ::-moz-range-track {\n ", "\n }\n ::-ms-track {\n ", "\n }\n ::-ms-fill-lower {\n ", "\n }\n ::-ms-fill-upper {\n ", "\n }\n\n ::-webkit-slider-thumb {\n ", "\n }\n ::-moz-range-thumb {\n ", "\n }\n ::-ms-thumb {\n ", "\n }\n }\n"])), function (_ref) {
3828
3850
  var volumeHidden = _ref.volumeHidden;
3829
3851
  return volumeHidden ? '40px' : '100px';
@@ -4157,7 +4179,7 @@ var Component = function Component(_ref) {
4157
4179
  }, error)));
4158
4180
  };
4159
4181
 
4160
- var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
4182
+ var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
4161
4183
  var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
4162
4184
  var isMenuOpen = _ref.isMenuOpen;
4163
4185
  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 ";
@@ -4172,7 +4194,7 @@ var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$5 || (_templ
4172
4194
  var visible = _ref3.visible;
4173
4195
  return visible ? 'visible' : 'hidden';
4174
4196
  }, zIndexes.search, devices.mobile);
4175
- var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref4) {
4197
+ var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n background-color: var(--base-color-white);\n padding-top: ", ";\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet, function (_ref4) {
4176
4198
  var theme = _ref4.theme;
4177
4199
  return theme.spacing[12];
4178
4200
  });
@@ -4840,12 +4862,12 @@ var Tabs = function Tabs(_ref) {
4840
4862
  }, "MENU"))));
4841
4863
  };
4842
4864
 
4843
- var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject5$6, _templateObject6$3, _templateObject7$3;
4865
+ var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject5$6, _templateObject6$4, _templateObject7$3;
4844
4866
  var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__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);
4845
4867
  var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
4846
4868
  var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__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"])));
4847
4869
  var InputContainer = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__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);
4848
- var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4870
+ var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
4849
4871
  var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n height: 24px;\n width: 24px;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
4850
4872
 
4851
4873
  var SearchBar = function SearchBar(_ref) {
@@ -5078,13 +5100,13 @@ var Navigation = function Navigation(_ref) {
5078
5100
  })))));
5079
5101
  };
5080
5102
 
5081
- var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$4;
5103
+ var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$5;
5082
5104
  var FooterSection = /*#__PURE__*/styled.section(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
5083
5105
  var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__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"])));
5084
5106
  var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__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);
5085
5107
  var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
5086
5108
  var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
5087
- var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$4 || (_templateObject6$4 = /*#__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);
5109
+ var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$5 || (_templateObject6$5 = /*#__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);
5088
5110
 
5089
5111
  var _templateObject$D, _templateObject2$o, _templateObject3$h;
5090
5112
  var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$D || (_templateObject$D = /*#__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);
@@ -5105,13 +5127,13 @@ var PolicyLinks = function PolicyLinks(_ref) {
5105
5127
  }));
5106
5128
  };
5107
5129
 
5108
- var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8, _templateObject6$5, _templateObject7$4, _templateObject8$2;
5130
+ var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$2;
5109
5131
  var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__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);
5110
5132
  var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__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);
5111
5133
  var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__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);
5112
5134
  var SignUpText = /*#__PURE__*/styled.p(_templateObject4$d || (_templateObject4$d = /*#__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);
5113
5135
  var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 3;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 9px;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
5114
- var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
5136
+ var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n height: 60px;\n\n @media ", " {\n & {\n height: auto;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
5115
5137
  var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n"])));
5116
5138
  var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &&& {\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n }\n"])));
5117
5139
 
@@ -5179,7 +5201,7 @@ var Footer = function Footer(_ref) {
5179
5201
  }, additionalInfo)))));
5180
5202
  };
5181
5203
 
5182
- var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$6;
5204
+ var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$7;
5183
5205
  var LIST_ITEM_GAP = 32;
5184
5206
  var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__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) {
5185
5207
  var bottomBorder = _ref.bottomBorder;
@@ -5202,7 +5224,7 @@ var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateOb
5202
5224
  var fullWidth = _ref5.fullWidth;
5203
5225
  return fullWidth ? '74px' : '46px';
5204
5226
  });
5205
- var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
5227
+ var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
5206
5228
 
5207
5229
  var _excluded$9 = ["id", "text"];
5208
5230
 
@@ -5447,7 +5469,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
5447
5469
  })) : null) : null))));
5448
5470
  };
5449
5471
 
5450
- var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject6$7, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1;
5472
+ var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject6$8, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1;
5451
5473
  var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
5452
5474
  var sticky = _ref.sticky;
5453
5475
  return sticky ? 'sticky' : 'initial';
@@ -5458,7 +5480,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$k || (_templateO
5458
5480
  return title ? 'row' : 'row-reverse';
5459
5481
  }, devices.tablet, devices.mobile);
5460
5482
  var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
5461
- var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
5483
+ var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
5462
5484
  var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
5463
5485
  var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
5464
5486
  var theme = _ref3.theme;
@@ -5511,7 +5533,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
5511
5533
  }, message)));
5512
5534
  };
5513
5535
 
5514
- var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
5536
+ var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$4;
5515
5537
  var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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);
5516
5538
  var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
5517
5539
  var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__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) {
@@ -5520,7 +5542,7 @@ var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3
5520
5542
  }, Colors.White);
5521
5543
  var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 2em;\n width: fit-content;\n"])));
5522
5544
  var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
5523
- var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
5545
+ var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
5524
5546
  var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
5525
5547
  var LineThrough = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-darkgrey);\n"])));
5526
5548
 
@@ -5825,7 +5847,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
5825
5847
  }))))));
5826
5848
  };
5827
5849
 
5828
- var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$9, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
5850
+ var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
5829
5851
  var LENGTH_LARGE_TEXT = 28;
5830
5852
  var LENGTH_SMALL_TEXT$1 = 19;
5831
5853
  var LENGTH_TEXT_TABLET = 10;
@@ -5851,7 +5873,7 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templat
5851
5873
  return fullWidth ? '0' : '20px';
5852
5874
  });
5853
5875
  var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
5854
- var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
5876
+ var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
5855
5877
  var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
5856
5878
  var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
5857
5879
  var LabelContainer = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
@@ -6228,7 +6250,7 @@ var ContactCard = function ContactCard(_ref) {
6228
6250
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
6229
6251
  };
6230
6252
 
6231
- var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$a, _templateObject7$8;
6253
+ var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$b, _templateObject7$8;
6232
6254
  var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6233
6255
  var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$z || (_templateObject2$z = /*#__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) {
6234
6256
  return props.clickable ? 'pointer' : 'default';
@@ -6238,7 +6260,7 @@ var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_
6238
6260
  return props.showImage ? 2 : '1 / span 4';
6239
6261
  }, devices.mobile);
6240
6262
  var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
6241
- var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
6263
+ var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
6242
6264
  var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
6243
6265
  return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
6244
6266
  });
@@ -6516,7 +6538,7 @@ var Information = function Information(_ref) {
6516
6538
  }))));
6517
6539
  };
6518
6540
 
6519
- var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$g, _templateObject6$b, _templateObject7$9, _templateObject8$6;
6541
+ var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$g, _templateObject6$c, _templateObject7$9, _templateObject8$6;
6520
6542
  var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n h2 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
6521
6543
  var theme = _ref.theme;
6522
6544
  return theme.colors.primary;
@@ -6534,7 +6556,7 @@ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateOb
6534
6556
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
6535
6557
  }, devices.mobile);
6536
6558
  var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
6537
- var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
6559
+ var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
6538
6560
  var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
6539
6561
  var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
6540
6562
 
@@ -6614,13 +6636,13 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
6614
6636
  }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
6615
6637
  };
6616
6638
 
6617
- var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$h, _templateObject6$c, _templateObject7$a, _templateObject8$7;
6639
+ var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$h, _templateObject6$d, _templateObject7$a, _templateObject8$7;
6618
6640
  var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__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);
6619
6641
  var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__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);
6620
6642
  var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$v || (_templateObject3$v = /*#__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);
6621
6643
  var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObject4$o = /*#__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);
6622
6644
  var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
6623
- var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
6645
+ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
6624
6646
  var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
6625
6647
  var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
6626
6648
 
@@ -6753,12 +6775,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
6753
6775
  }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
6754
6776
  };
6755
6777
 
6756
- var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject5$j, _templateObject6$d, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
6778
+ var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject5$j, _templateObject6$e, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
6757
6779
  var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-overline-4);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
6758
6780
  var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$F || (_templateObject2$F = /*#__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"])));
6759
6781
  var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
6760
6782
  var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__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);
6761
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
6783
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n max-width: 155px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n }\n"])), function (_ref) {
6762
6784
  var invert = _ref.invert,
6763
6785
  theme = _ref.theme;
6764
6786
  return invert ? theme.colors.white : theme.colors.primary;
@@ -7165,13 +7187,13 @@ var Pagination = function Pagination(_ref) {
7165
7187
  }))));
7166
7188
  };
7167
7189
 
7168
- var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$r, _templateObject5$k, _templateObject6$e;
7190
+ var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$r, _templateObject5$k, _templateObject6$f;
7169
7191
  var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__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);
7170
7192
  var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
7171
7193
  var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
7172
7194
  var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
7173
7195
  var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n"])));
7174
- var PersonLink = /*#__PURE__*/styled.a(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
7196
+ var PersonLink = /*#__PURE__*/styled.a(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
7175
7197
 
7176
7198
  var Person = function Person(_ref) {
7177
7199
  var person = _ref.person,
@@ -7294,7 +7316,7 @@ var CreditListing = function CreditListing(_ref) {
7294
7316
  }));
7295
7317
  };
7296
7318
 
7297
- var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$f, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
7319
+ var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
7298
7320
  var LENGTH_TEXT = 28;
7299
7321
  var LENGTH_TEXT_TABLET$1 = 12;
7300
7322
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -7354,7 +7376,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_te
7354
7376
  var marginBottom = _ref10.marginBottom;
7355
7377
  return marginBottom + "px";
7356
7378
  });
7357
- var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
7379
+ var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
7358
7380
  var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
7359
7381
  var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
7360
7382
  var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
@@ -7576,7 +7598,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
7576
7598
  }))));
7577
7599
  };
7578
7600
 
7579
- var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$m, _templateObject6$g, _templateObject7$d;
7601
+ var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$m, _templateObject6$h, _templateObject7$d;
7580
7602
  var LENGTH_TEXT$2 = 28;
7581
7603
  var LENGTH_TEXT_TABLET$2 = 10;
7582
7604
  var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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) {
@@ -7596,7 +7618,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$C ||
7596
7618
  }, devices.mobile);
7597
7619
  var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
7598
7620
  var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
7599
- var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
7621
+ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n }\n }\n"])), function (_ref5) {
7600
7622
  var theme = _ref5.theme;
7601
7623
  return theme.colors.black;
7602
7624
  }, function (_ref6) {
@@ -7748,8 +7770,73 @@ var RadioGroup = function RadioGroup(_ref) {
7748
7770
  })));
7749
7771
  };
7750
7772
 
7751
- var _templateObject$12;
7752
- var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__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);
7773
+ var _templateObject$12, _templateObject2$L, _templateObject3$D;
7774
+ var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__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);
7775
+ var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__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"])));
7776
+ var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__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);
7777
+
7778
+ var StatusBanner = function StatusBanner(_ref) {
7779
+ var statusText = _ref.statusText,
7780
+ _ref$visibility = _ref.visibility,
7781
+ visibility = _ref$visibility === void 0 ? true : _ref$visibility;
7782
+
7783
+ var _useState = useState(visibility),
7784
+ isVisible = _useState[0],
7785
+ setIsVisible = _useState[1];
7786
+
7787
+ var _useState2 = useState(false),
7788
+ isClosing = _useState2[0],
7789
+ setIsClosing = _useState2[1];
7790
+
7791
+ var content = useRef(null);
7792
+
7793
+ var handleCloseBanner = function handleCloseBanner() {
7794
+ setIsClosing(true);
7795
+
7796
+ var transitionEnd = function transitionEnd() {
7797
+ setIsVisible(!visibility);
7798
+
7799
+ if (content.current) {
7800
+ content.current.removeEventListener('transitionend', transitionEnd);
7801
+ }
7802
+ };
7803
+
7804
+ if (content.current) {
7805
+ content.current.addEventListener('transitionend', transitionEnd);
7806
+ }
7807
+
7808
+ setTimeout(function () {
7809
+ setIsVisible(!visibility);
7810
+ }, 300);
7811
+ };
7812
+
7813
+ var onKeyboardCloseHandler = function onKeyboardCloseHandler(e) {
7814
+ if (e.key === 'Enter') {
7815
+ handleCloseBanner();
7816
+ }
7817
+ };
7818
+
7819
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StatusBannerWrapper, {
7820
+ role: "alert",
7821
+ className: isClosing ? 'closing' : '',
7822
+ "data-testid": "statusContainer"
7823
+ }, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement("div", {
7824
+ dangerouslySetInnerHTML: {
7825
+ __html: statusText
7826
+ }
7827
+ })), /*#__PURE__*/React__default.createElement(SvgContainer$3, {
7828
+ onClick: handleCloseBanner,
7829
+ tabIndex: 0,
7830
+ role: "button",
7831
+ "aria-label": "Close",
7832
+ onKeyDown: onKeyboardCloseHandler
7833
+ }, /*#__PURE__*/React__default.createElement(Icon, {
7834
+ iconName: "Close"
7835
+ })))));
7836
+ };
7837
+
7838
+ var _templateObject$13;
7839
+ var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__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);
7753
7840
 
7754
7841
  var SectionTitle = function SectionTitle(_ref) {
7755
7842
  var title = _ref.title,
@@ -7775,8 +7862,8 @@ var SectionTitle = function SectionTitle(_ref) {
7775
7862
  }, description))));
7776
7863
  };
7777
7864
 
7778
- var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$n, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
7779
- var stateStyles = /*#__PURE__*/css(_templateObject$13 || (_templateObject$13 = /*#__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) {
7865
+ var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
7866
+ var stateStyles = /*#__PURE__*/css(_templateObject$14 || (_templateObject$14 = /*#__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) {
7780
7867
  var theme = _ref.theme;
7781
7868
  return "3px solid " + theme.colors.lapisLazuli;
7782
7869
  }, function (_ref2) {
@@ -7786,11 +7873,11 @@ var stateStyles = /*#__PURE__*/css(_templateObject$13 || (_templateObject$13 = /
7786
7873
  var theme = _ref3.theme;
7787
7874
  return theme.colors.lightgrey;
7788
7875
  });
7789
- var borderStyles = /*#__PURE__*/css(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
7876
+ var borderStyles = /*#__PURE__*/css(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
7790
7877
  var theme = _ref4.theme;
7791
7878
  return theme.colors.darkgrey;
7792
7879
  });
7793
- var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7880
+ var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7794
7881
  var listItemStyles = /*#__PURE__*/css(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
7795
7882
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
7796
7883
  var theme = _ref5.theme;
@@ -7800,7 +7887,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
7800
7887
  title: 'Select Arrow'
7801
7888
  };
7802
7889
  })(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
7803
- var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
7890
+ var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
7804
7891
  var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
7805
7892
  var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
7806
7893
  var Option = /*#__PURE__*/styled.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
@@ -8197,8 +8284,8 @@ function Select(_ref3) {
8197
8284
  }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
8198
8285
  }
8199
8286
 
8200
- var _templateObject$14;
8201
- var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__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) {
8287
+ var _templateObject$15;
8288
+ var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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) {
8202
8289
  var theme = _ref.theme;
8203
8290
  return theme.colors.primary;
8204
8291
  });
@@ -8226,8 +8313,8 @@ var TextOnly = function TextOnly(_ref) {
8226
8313
  })));
8227
8314
  };
8228
8315
 
8229
- var _templateObject$15, _templateObject2$M;
8230
- var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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) {
8316
+ var _templateObject$16, _templateObject2$N;
8317
+ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__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) {
8231
8318
  var _ref$aspectRatio = _ref.aspectRatio,
8232
8319
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
8233
8320
  return aspectRatio;
@@ -8237,7 +8324,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$1
8237
8324
  height = _ref2.height;
8238
8325
  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
8239
8326
  });
8240
- var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
8327
+ var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
8241
8328
 
8242
8329
  var ImageWithCaption = function ImageWithCaption(_ref) {
8243
8330
  var caption = _ref.caption,
@@ -8275,13 +8362,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
8275
8362
  }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
8276
8363
  };
8277
8364
 
8278
- var _templateObject$16, _templateObject2$N, _templateObject3$E;
8279
- var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
8280
- var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
8365
+ var _templateObject$17, _templateObject2$O, _templateObject3$F;
8366
+ var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
8367
+ var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
8281
8368
  var displayAttribution = _ref.displayAttribution;
8282
8369
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
8283
8370
  });
8284
- var Line$1 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
8371
+ var Line$1 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
8285
8372
 
8286
8373
  var Quote = function Quote(_ref) {
8287
8374
  var text = _ref.text,
@@ -8305,13 +8392,13 @@ var Quote = function Quote(_ref) {
8305
8392
  }, attribution))));
8306
8393
  };
8307
8394
 
8308
- var _templateObject$17, _templateObject2$O, _templateObject3$F, _templateObject4$w, _templateObject5$o, _templateObject6$i;
8309
- var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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"])));
8310
- var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
8311
- var StyledImage = /*#__PURE__*/styled.img(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
8395
+ var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$o, _templateObject6$j;
8396
+ var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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"])));
8397
+ var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
8398
+ var StyledImage = /*#__PURE__*/styled.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
8312
8399
  var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8313
8400
  var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
8314
- var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
8401
+ var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
8315
8402
 
8316
8403
  var MiniCard = function MiniCard(_ref) {
8317
8404
  var _ref$title = _ref.title,
@@ -8342,18 +8429,18 @@ var MiniCard = function MiniCard(_ref) {
8342
8429
  columnSpanDevice: 4,
8343
8430
  columnStartDesktop: 4,
8344
8431
  columnSpanDesktop: 4
8345
- }, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement(Overline, {
8432
+ }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
8346
8433
  level: 4
8347
8434
  }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
8348
8435
  level: 2
8349
8436
  }, title)))));
8350
8437
  };
8351
8438
 
8352
- var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$x;
8353
- var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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"])));
8354
- var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
8355
- var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8356
- var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
8439
+ var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x;
8440
+ var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__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"])));
8441
+ var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
8442
+ var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8443
+ var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
8357
8444
 
8358
8445
  var keyDown = function keyDown(e, toggleFunction) {
8359
8446
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -8416,7 +8503,7 @@ var ReadMore = function ReadMore(_ref) {
8416
8503
  var truncatedText = truncate ? truncateReactNodeString(introText != null ? introText : '', INTRO_CHAR_LIMIT, true) : introText;
8417
8504
 
8418
8505
  var IntroText = function IntroText() {
8419
- return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncate ? /*#__PURE__*/React__default.createElement("div", {
8506
+ return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$5, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncate ? /*#__PURE__*/React__default.createElement("div", {
8420
8507
  dangerouslySetInnerHTML: {
8421
8508
  __html: "" + truncatedText
8422
8509
  }
@@ -8434,7 +8521,7 @@ var ReadMore = function ReadMore(_ref) {
8434
8521
  }, /*#__PURE__*/React__default.createElement(Header, {
8435
8522
  level: 5,
8436
8523
  semanticLevel: 3
8437
- }, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$4, {
8524
+ }, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
8438
8525
  "data-testid": "richcontainer",
8439
8526
  ref: readMoreContent,
8440
8527
  id: contentContainerId,
@@ -8451,6 +8538,186 @@ var ReadMore = function ReadMore(_ref) {
8451
8538
  }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
8452
8539
  };
8453
8540
 
8541
+ var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y;
8542
+ var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
8543
+ var MenuList = /*#__PURE__*/styled.ul(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
8544
+ var mobileOpen = _ref.mobileOpen;
8545
+ return mobileOpen ? "block" : 'none';
8546
+ }, Colors.White, Colors.DarkGrey);
8547
+ var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), Colors.Black, function (_ref2) {
8548
+ var active = _ref2.active;
8549
+ return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
8550
+ }, Colors.MidGrey, devices.mobile);
8551
+ var MobileButton = /*#__PURE__*/styled.button(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
8552
+
8553
+ /**
8554
+ * Vertical menu component uses for navigation
8555
+ * inside website chapter. It looks like a vertical
8556
+ * list with clickable items on desktop and dropdown
8557
+ * list on mobile.
8558
+ *
8559
+ * ## Menu items
8560
+ * Menu items should be passed as `items` prop. This
8561
+ * should be an array of objects. Each object should
8562
+ * have `text` (text displayed as a menu item) and
8563
+ * `onClick` (click handler function)
8564
+ *
8565
+ * ## Active menu item
8566
+ * Active menu item should be passed as component `activeItem`
8567
+ * prop. This indicates on which menu item should be highlighted
8568
+ * as active one. Should be equal to `text` prop from one of the `items`
8569
+ */
8570
+
8571
+ var AuxiliaryNav = function AuxiliaryNav(_ref) {
8572
+ var items = _ref.items,
8573
+ activeItem = _ref.activeItem;
8574
+
8575
+ var _useState = useState(false),
8576
+ mobileOpen = _useState[0],
8577
+ setMobileOpen = _useState[1];
8578
+
8579
+ var containerRef = useRef(null);
8580
+
8581
+ var mobileButtonClickHandler = function mobileButtonClickHandler() {
8582
+ setMobileOpen(function (prev) {
8583
+ return !prev;
8584
+ });
8585
+ };
8586
+
8587
+ var outsideClickHandler = function outsideClickHandler(event) {
8588
+ if (containerRef.current && !containerRef.current.contains(event.target)) {
8589
+ setMobileOpen(false);
8590
+ }
8591
+ };
8592
+
8593
+ useEffect(function () {
8594
+ document.addEventListener('mousedown', outsideClickHandler);
8595
+ return function () {
8596
+ document.removeEventListener('mousedown', outsideClickHandler);
8597
+ };
8598
+ }, [containerRef]);
8599
+ return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
8600
+ ref: containerRef,
8601
+ "data-testid": "nav-menu-container"
8602
+ }, /*#__PURE__*/React__default.createElement(MobileButton, {
8603
+ mobileOpen: mobileOpen,
8604
+ onClick: mobileButtonClickHandler,
8605
+ "data-testid": "nav-menu-mobile-button"
8606
+ }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
8607
+ iconName: "DropdownArrow",
8608
+ direction: mobileOpen ? 'left' : 'right'
8609
+ })), /*#__PURE__*/React__default.createElement(MenuList, {
8610
+ mobileOpen: mobileOpen,
8611
+ "data-testid": "nav-menu-list"
8612
+ }, items.map(function (item, idx) {
8613
+ return /*#__PURE__*/React__default.createElement("li", {
8614
+ key: item.text + "-" + idx
8615
+ }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
8616
+ onClick: item.onClick,
8617
+ active: item.text === activeItem,
8618
+ "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
8619
+ }, item.text));
8620
+ })));
8621
+ };
8622
+
8623
+ var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z, _templateObject5$p, _templateObject6$k;
8624
+ var Container$1 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
8625
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
8626
+ var Section = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
8627
+ var color = _ref.color;
8628
+ return "var(--base-color-" + color + ")";
8629
+ });
8630
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
8631
+ var Text = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
8632
+ var color = _ref2.color;
8633
+ return "var(--base-color-" + color + ")";
8634
+ });
8635
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
8636
+ var color = _ref3.color;
8637
+ return "var(--base-color-" + color + ")";
8638
+ });
8639
+
8640
+ /**
8641
+ * Password strength indicator component.
8642
+ * This renders some number of lines (6 by default)
8643
+ * which should become active when the user improves
8644
+ * the strength of the entered password.
8645
+ *
8646
+ * ## Sections
8647
+ * To set number of sections it should be passed
8648
+ * as `sections` prop.
8649
+ *
8650
+ * ## Active section
8651
+ * To set number of active sections it should be passed
8652
+ * as `activeSections` prop.
8653
+ *
8654
+ * ## Colors
8655
+ * Color of every element can be controlled by properties:
8656
+ * `sectionsColor`, `activeSectionsColor`,
8657
+ * `textColor`, `strengthLabelColor`.
8658
+ *
8659
+ * ## Text
8660
+ * `text` prop is used to render some message.
8661
+ * For example error (together with proper red color)
8662
+ * or some password requirement. It can be empty.
8663
+ *
8664
+ * ## Strength label
8665
+ * `strengthLabel` prop is used to render strength characteristic
8666
+ * of entered password. For example: `weak`, `normal`, `strong`, etc.
8667
+ * It can be empty.
8668
+ */
8669
+
8670
+ var PasswordStrength = function PasswordStrength(_ref) {
8671
+ var _ref$sections = _ref.sections,
8672
+ sections = _ref$sections === void 0 ? 6 : _ref$sections,
8673
+ _ref$activeSections = _ref.activeSections,
8674
+ activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
8675
+ _ref$sectionsColor = _ref.sectionsColor,
8676
+ sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
8677
+ _ref$activeSectionsCo = _ref.activeSectionsColor,
8678
+ activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
8679
+ _ref$text = _ref.text,
8680
+ text = _ref$text === void 0 ? '' : _ref$text,
8681
+ _ref$textColor = _ref.textColor,
8682
+ textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
8683
+ _ref$strengthLabel = _ref.strengthLabel,
8684
+ strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
8685
+ _ref$strengthLabelCol = _ref.strengthLabelColor,
8686
+ strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
8687
+
8688
+ var setSectionColor = function setSectionColor(index) {
8689
+ return index < activeSections ? activeSectionsColor : sectionsColor;
8690
+ };
8691
+
8692
+ var setSectionDataTestId = function setSectionDataTestId(index) {
8693
+ return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
8694
+ };
8695
+
8696
+ return /*#__PURE__*/React__default.createElement(Container$1, {
8697
+ "data-testid": "password-strength-container"
8698
+ }, /*#__PURE__*/React__default.createElement(Sections, {
8699
+ "data-testid": "password-strength-sections"
8700
+ }, Array.from({
8701
+ length: sections
8702
+ }, function (_section, i) {
8703
+ return /*#__PURE__*/React__default.createElement(Section, {
8704
+ key: i,
8705
+ color: setSectionColor(i),
8706
+ "data-testid": setSectionDataTestId(i)
8707
+ });
8708
+ })), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
8709
+ color: textColor,
8710
+ "data-testid": "password-strength-text"
8711
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
8712
+ level: 6
8713
+ }, text)), /*#__PURE__*/React__default.createElement(LabelText, {
8714
+ color: strengthLabelColor,
8715
+ "data-testid": "password-strength-label"
8716
+ }, /*#__PURE__*/React__default.createElement(Overline, {
8717
+ level: 2
8718
+ }, strengthLabel))));
8719
+ };
8720
+
8454
8721
  var UpsellSection = function UpsellSection(_ref) {
8455
8722
  var title = _ref.title,
8456
8723
  richText = _ref.richText,
@@ -8539,9 +8806,9 @@ var LiveChat = function LiveChat() {
8539
8806
  });
8540
8807
  };
8541
8808
 
8542
- var _templateObject$19, _templateObject2$Q;
8543
- var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
8544
- var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Q || (_templateObject2$Q = /*#__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) {
8809
+ var _templateObject$1c, _templateObject2$T;
8810
+ var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
8811
+ var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$T || (_templateObject2$T = /*#__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) {
8545
8812
  var hideBottomBorder = _ref.hideBottomBorder;
8546
8813
  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
8547
8814
  }, devices.mobileAndTablet, devices.mobile);
@@ -8569,11 +8836,11 @@ var StickyBar = function StickyBar(_ref) {
8569
8836
  }, children)));
8570
8837
  };
8571
8838
 
8572
- var _templateObject$1a, _templateObject2$R, _templateObject3$H, _templateObject4$y;
8573
- var InnerModal = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__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);
8574
- var CloseButton = /*#__PURE__*/styled.button(_templateObject2$R || (_templateObject2$R = /*#__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);
8575
- var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8576
- var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$y || (_templateObject4$y = /*#__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"])));
8839
+ var _templateObject$1d, _templateObject2$U, _templateObject3$K, _templateObject4$A;
8840
+ var InnerModal = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__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);
8841
+ var CloseButton = /*#__PURE__*/styled.button(_templateObject2$U || (_templateObject2$U = /*#__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);
8842
+ var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8843
+ var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$A || (_templateObject4$A = /*#__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"])));
8577
8844
 
8578
8845
  var _excluded$k = ["isOpen", "setIsOpen", "children", "appElementId"];
8579
8846
  var MAX_Z_INDEX = 9999999999;
@@ -8694,8 +8961,8 @@ var ModalWindow = function ModalWindow(_ref) {
8694
8961
  })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
8695
8962
  };
8696
8963
 
8697
- var _templateObject$1b;
8698
- var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1b || (_templateObject$1b = /*#__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) {
8964
+ var _templateObject$1e;
8965
+ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1e || (_templateObject$1e = /*#__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) {
8699
8966
  var theme = _ref.theme;
8700
8967
  return theme.colors.primary;
8701
8968
  }, function (_ref2) {
@@ -9636,5 +9903,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1b || (_templa
9636
9903
  return theme.fonts.tablet.sizes.body[1];
9637
9904
  }, devices.desktop, devices.largeDesktop);
9638
9905
 
9639
- export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
9906
+ export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
9640
9907
  //# sourceMappingURL=chord.esm.js.map