@royaloperahouse/chord 2.4.1 → 2.4.3-a-chord-development

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/chord.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement } from 'react';
1
+ import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement, useLayoutEffect } 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';
@@ -1544,13 +1544,15 @@ var Tickets = (function (_ref) {
1544
1544
 
1545
1545
  var Wheelchair = (function (_ref) {
1546
1546
  var _ref$color = _ref.color,
1547
- color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
1547
+ color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
1548
+ ariaLabel = _ref.ariaLabel;
1548
1549
  return /*#__PURE__*/createElement("svg", {
1549
1550
  width: "100%",
1550
1551
  height: "100%",
1551
1552
  viewBox: "0 0 24 24",
1552
1553
  fill: "none",
1553
- xmlns: "http://www.w3.org/2000/svg"
1554
+ xmlns: "http://www.w3.org/2000/svg",
1555
+ "aria-label": ariaLabel
1554
1556
  }, /*#__PURE__*/createElement("path", {
1555
1557
  d: "M8.4 18.8c-1.1 0-2.2-.4-3-1.1-.8-.8-1.3-1.8-1.3-2.9-.1-1.6.9-3.2 2.3-3.9l-.4-1c-1.9.9-3 2.8-3 4.9.1 2.8 2.4 5.1 5.3 5.1h.2c2.6-.1 4.7-2.1 5.1-4.6l-1.1-.1c-.3 2-2 3.6-4.1 3.6ZM9.8 4.5c1.2 0 2.2-1 2.2-2.2C12 1.1 11 .1 9.8.1c-1.2 0-2.2 1-2.2 2.2 0 1.2.9 2.2 2.2 2.2Zm0-3.3c.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1Zm4.9 12c-.3-.5-.9-.8-1.6-.8h-2.6V6.3c0-.6-.5-1.2-1.1-1.2H6.2c-.5.1-.9.5-.9 1v3.2h1.1V6.2l2.9.1v7.2h3.8c.3 0 .5.1.6.3l3.4 5.4.9-.6-3.3-5.4Z",
1556
1558
  fill: color
@@ -2431,7 +2433,8 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
2431
2433
  color = _ref.color,
2432
2434
  iconName = _ref.iconName,
2433
2435
  title = _ref.title,
2434
- direction = _ref.direction;
2436
+ direction = _ref.direction,
2437
+ ariaLabel = _ref.ariaLabel;
2435
2438
  var IconComponent = IconLibrary[iconName];
2436
2439
  return /*#__PURE__*/createElement(Wrapper, {
2437
2440
  className: className,
@@ -2439,7 +2442,8 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
2439
2442
  title: title,
2440
2443
  direction: direction
2441
2444
  }, /*#__PURE__*/createElement(IconComponent, {
2442
- color: color
2445
+ color: color,
2446
+ ariaLabel: ariaLabel
2443
2447
  }));
2444
2448
  });
2445
2449
  Icon.displayName = 'Icon';
@@ -2467,14 +2471,21 @@ var Button = function Button(_ref) {
2467
2471
  };
2468
2472
 
2469
2473
  var _templateObject$4;
2470
- var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n border-color: ", ";\n"])), function (_ref) {
2474
+ var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n"])), function (_ref) {
2475
+ var _theme$colors;
2476
+
2471
2477
  var bgColor = _ref.bgColor,
2472
2478
  theme = _ref.theme;
2473
- return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
2479
+ return bgColor ? "var(--base-color-" + bgColor + ")" : theme == null ? void 0 : (_theme$colors = theme.colors) == null ? void 0 : _theme$colors.primary;
2474
2480
  }, function (_ref2) {
2481
+ var _theme$colors2;
2482
+
2475
2483
  var bgColor = _ref2.bgColor,
2476
2484
  theme = _ref2.theme;
2477
- return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
2485
+ return bgColor ? "var(--base-color-" + bgColor + ")" : theme == null ? void 0 : (_theme$colors2 = theme.colors) == null ? void 0 : _theme$colors2.primary;
2486
+ }, function (_ref3) {
2487
+ var disabled = _ref3.disabled;
2488
+ return disabled ? 'none' : 'auto';
2478
2489
  });
2479
2490
 
2480
2491
  var CarouselType;
@@ -2532,9 +2543,16 @@ var ButtonType;
2532
2543
 
2533
2544
  var PrimaryButton = function PrimaryButton(_ref) {
2534
2545
  var children = _ref.children,
2535
- props = _objectWithoutPropertiesLoose(_ref, ["children"]);
2546
+ disabled = _ref.disabled,
2547
+ props = _objectWithoutPropertiesLoose(_ref, ["children", "disabled", "color", "bgColor"]);
2536
2548
 
2537
- return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
2549
+ return disabled ? /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
2550
+ color: Colors.Black,
2551
+ bgColor: Colors.MidGrey,
2552
+ disabled: true,
2553
+ "aria-disabled": "true",
2554
+ role: "button"
2555
+ }, props), children) : /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
2538
2556
  color: Colors.White
2539
2557
  }, props), children);
2540
2558
  };
@@ -2776,7 +2794,39 @@ var GridItem = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a =
2776
2794
  });
2777
2795
 
2778
2796
  var _templateObject$b;
2779
- var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
2797
+ /**
2798
+ * # IMPORTANT
2799
+ * Please use the `<GridItem />` component instead of this component if possible.
2800
+ * This component was introduced due to incompatibilities between versions of the Chord library.
2801
+ */
2802
+
2803
+ var GridItemLegacy = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", " / span\n ", ";\n\n @media ", " {\n & {\n grid-column: ", " /\n span ", ";\n }\n }\n\n @media ", " {\n & {\n grid-column: ", " / span\n ", ";\n }\n }\n"])), function (_ref) {
2804
+ var columnStartDesktop = _ref.columnStartDesktop;
2805
+ return columnStartDesktop;
2806
+ }, function (_ref2) {
2807
+ var _ref2$columnSpanDeskt = _ref2.columnSpanDesktop,
2808
+ columnSpanDesktop = _ref2$columnSpanDeskt === void 0 ? 1 : _ref2$columnSpanDeskt;
2809
+ return columnSpanDesktop;
2810
+ }, devices.mobile, function (_ref3) {
2811
+ var columnStartDevice = _ref3.columnStartDevice,
2812
+ columnStartSmallDevice = _ref3.columnStartSmallDevice;
2813
+ return columnStartSmallDevice != null ? columnStartSmallDevice : columnStartDevice;
2814
+ }, function (_ref4) {
2815
+ var _ref4$columnSpanDevic = _ref4.columnSpanDevice,
2816
+ columnSpanDevice = _ref4$columnSpanDevic === void 0 ? 1 : _ref4$columnSpanDevic,
2817
+ columnSpanSmallDevice = _ref4.columnSpanSmallDevice;
2818
+ return columnSpanSmallDevice != null ? columnSpanSmallDevice : columnSpanDevice;
2819
+ }, devices.tablet, function (_ref5) {
2820
+ var columnStartDevice = _ref5.columnStartDevice;
2821
+ return columnStartDevice;
2822
+ }, function (_ref6) {
2823
+ var _ref6$columnSpanDevic = _ref6.columnSpanDevice,
2824
+ columnSpanDevice = _ref6$columnSpanDevic === void 0 ? 1 : _ref6$columnSpanDevic;
2825
+ return columnSpanDevice;
2826
+ });
2827
+
2828
+ var _templateObject$c;
2829
+ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
2780
2830
  var _ref$aspectRatio = _ref.aspectRatio,
2781
2831
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
2782
2832
  return aspectRatio;
@@ -2794,8 +2844,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$b || (_tem
2794
2844
  return aspectRatio;
2795
2845
  });
2796
2846
 
2797
- var _templateObject$c, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
2798
- var ProgressView = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
2847
+ var _templateObject$d, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5;
2848
+ var ProgressView = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
2799
2849
  var height = _ref.height;
2800
2850
  return height ? height + "px" : '6px';
2801
2851
  });
@@ -2878,13 +2928,13 @@ var Progress = function Progress(_ref) {
2878
2928
  }, renderSteps()));
2879
2929
  };
2880
2930
 
2881
- var _templateObject$d, _templateObject2$4, _templateObject3$3;
2882
- var RadioContainer = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
2931
+ var _templateObject$e, _templateObject2$4, _templateObject3$3;
2932
+ var RadioContainer = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n"])));
2883
2933
  var RadioLine = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 20px;\n grid-template-columns: 1.15em 1fr;\n user-select: none;\n cursor: pointer;\n color: black;\n\n &:focus {\n outline: none;\n }\n\n input[type='radio'] {\n cursor: pointer;\n appearance: none;\n background-color: #ffffff00;\n margin: 0;\n color: black;\n width: 20px;\n height: 20px;\n border: 1px solid black;\n border-radius: 50%;\n position: relative;\n place-content: center;\n display: block;\n }\n\n input[type='radio']::before {\n content: '';\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #ffffff00;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n input[type='radio']:checked::before {\n background-color: black;\n }\n"])));
2884
2934
  var RadioError = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-errorstate);\n"])));
2885
2935
 
2886
- var _templateObject$e;
2887
- var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
2936
+ var _templateObject$f;
2937
+ var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n margin: var(--margin-", "-", ");\n"])), function (_ref) {
2888
2938
  var typography = _ref.typography;
2889
2939
  return typography;
2890
2940
  }, function (_ref2) {
@@ -3041,8 +3091,8 @@ var Radio = function Radio(_ref) {
3041
3091
  }, error)));
3042
3092
  };
3043
3093
 
3044
- var _templateObject$f, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
3045
- var Container = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3094
+ var _templateObject$g, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6;
3095
+ var Container = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3046
3096
  var Radio$1 = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
3047
3097
  var error = _ref.error,
3048
3098
  darkMode = _ref.darkMode,
@@ -3150,8 +3200,8 @@ var Radio2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
3150
3200
  }, error)));
3151
3201
  });
3152
3202
 
3153
- var _templateObject$g, _templateObject2$6, _templateObject3$5;
3154
- var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
3203
+ var _templateObject$h, _templateObject2$6, _templateObject3$5;
3204
+ var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n"])));
3155
3205
  var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n justify-content: center;\n display: flex;\n align-items: center;\n width: var(--rotator-button-width);\n height: var(--rotator-button-width);\n background-color: var(--base-color-lightgrey);\n color: var(--base-color-black);\n\n svg {\n width: var(--rotator-button-icon-width);\n height: var(--rotator-button-icon-width);\n }\n\n svg path {\n fill: var(--base-color-black);\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n\n @media ", " {\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n\n :hover {\n cursor: default;\n background-color: var(--base-color-black);\n\n && svg path {\n fill: var(--base-color-white);\n }\n }\n }\n"])), function (_ref) {
3156
3206
  var theme = _ref.theme;
3157
3207
  return theme.colors.primary;
@@ -3222,8 +3272,8 @@ var RotatorButtons = function RotatorButtons(_ref) {
3222
3272
  }, renderNextIcon()));
3223
3273
  };
3224
3274
 
3225
- var _templateObject$h;
3226
- var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
3275
+ var _templateObject$i;
3276
+ var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
3227
3277
  var fillColor = _ref.fillColor;
3228
3278
  return fillColor;
3229
3279
  });
@@ -3247,8 +3297,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
3247
3297
  })));
3248
3298
  };
3249
3299
 
3250
- var _templateObject$i, _templateObject2$7;
3251
- var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
3300
+ var _templateObject$j, _templateObject2$7;
3301
+ var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n"])));
3252
3302
  var Splitter = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n height: 4px;\n background: var(--base-color-lightgrey);\n"])));
3253
3303
 
3254
3304
  var SectionSplitter = function SectionSplitter(_ref) {
@@ -3267,8 +3317,8 @@ var SectionSplitter = function SectionSplitter(_ref) {
3267
3317
  }, /*#__PURE__*/React__default.createElement(Splitter, null)));
3268
3318
  };
3269
3319
 
3270
- var _templateObject$j;
3271
- var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
3320
+ var _templateObject$k;
3321
+ var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n width: 172px;\n"])));
3272
3322
 
3273
3323
  var SponsorLogo = function SponsorLogo(_ref) {
3274
3324
  var _ref$colorLogo = _ref.colorLogo,
@@ -3478,8 +3528,8 @@ var SponsorLogo = function SponsorLogo(_ref) {
3478
3528
  })))));
3479
3529
  };
3480
3530
 
3481
- var _templateObject$k, _templateObject2$8;
3482
- var CustomImage = /*#__PURE__*/styled.img(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
3531
+ var _templateObject$l, _templateObject2$8;
3532
+ var CustomImage = /*#__PURE__*/styled.img(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: 100px;\n max-width: auto;\n\n @media ", " {\n max-height: 55px;\n }\n\n @media ", " {\n max-height: 45px;\n }\n"])), devices.tablet, devices.mobile);
3483
3533
  var SponsorshipStyledIframe = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: transparent;\n height: 80px;\n margin: 0px;\n overflow: hidden;\n padding: 0;\n width: 80px;\n\n & > iframe {\n border: 0;\n display: block;\n margin: 0px;\n padding: 0px;\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n }\n"])), devices.mobile);
3484
3534
 
3485
3535
  var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?size=80';
@@ -3512,8 +3562,8 @@ var Sponsorship = function Sponsorship(_ref) {
3512
3562
  }));
3513
3563
  };
3514
3564
 
3515
- var _templateObject$l, _templateObject2$9;
3516
- var TabText = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
3565
+ var _templateObject$m, _templateObject2$9;
3566
+ var TabText = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n margin-right: 0px;\n margin-top: 5px;\n text-decoration: none;\n text-transform: uppercase;\n\n ", "\n\n @media ", " {\n ", "\n }\n"])), function (props) {
3517
3567
  if (props.withIcon === 'left') {
3518
3568
  return "margin-left: 5px;";
3519
3569
  }
@@ -3612,8 +3662,8 @@ var Tab = function Tab(_ref) {
3612
3662
  }));
3613
3663
  };
3614
3664
 
3615
- var _templateObject$m, _templateObject2$a;
3616
- var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
3665
+ var _templateObject$n, _templateObject2$a;
3666
+ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", ";\n font-family: var(--font-family-navigation);\n font-size: var(--font-size-navigation);\n font-weight: var(--font-weight-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n border-bottom: ", ";\n ", "\n\n @media ", ", ", " {\n &:hover {\n color: var(--base-color-", ");\n border-bottom: 1px solid var(--base-color-", ");\n\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n }\n"])), function (_ref) {
3617
3667
  var iconName = _ref.iconName;
3618
3668
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
3619
3669
  }, function (_ref2) {
@@ -3664,8 +3714,8 @@ var TabLink = function TabLink(_ref) {
3664
3714
  })) : null, children);
3665
3715
  };
3666
3716
 
3667
- var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3;
3668
- var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
3717
+ var _templateObject$o, _templateObject2$b, _templateObject3$6, _templateObject4$3;
3718
+ var TextAreaWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n"])), function (_ref) {
3669
3719
  var width = _ref.width;
3670
3720
  return width ? width + "px;" : '100%;';
3671
3721
  }, function (_ref2) {
@@ -3788,8 +3838,8 @@ var TextArea = function TextArea(_ref) {
3788
3838
  }, error))));
3789
3839
  };
3790
3840
 
3791
- var _templateObject$o, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
3792
- var Container$1 = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3841
+ var _templateObject$p, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1;
3842
+ var Container$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3793
3843
  var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n"])), function (_ref) {
3794
3844
  var width = _ref.width;
3795
3845
  if (!width) return 'none';
@@ -3915,8 +3965,8 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
3915
3965
  }, error)));
3916
3966
  });
3917
3967
 
3918
- var _templateObject$p, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
3919
- var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3968
+ var _templateObject$q, _templateObject2$d, _templateObject3$8, _templateObject4$5, _templateObject5$3;
3969
+ var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
3920
3970
  var textStyles = /*#__PURE__*/css(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_ref) {
3921
3971
  var theme = _ref.theme;
3922
3972
  return theme.fonts.desktop.weights.body[1];
@@ -3989,8 +4039,8 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
3989
4039
  }, error) : null);
3990
4040
  };
3991
4041
 
3992
- var _templateObject$q, _templateObject2$e;
3993
- var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$q || (_templateObject$q = /*#__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) {
4042
+ var _templateObject$r, _templateObject2$e;
4043
+ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
3994
4044
  var iconName = _ref.iconName;
3995
4045
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
3996
4046
  }, function (_ref2) {
@@ -4026,8 +4076,8 @@ var TextLogoProduct;
4026
4076
  TextLogoProduct["Cinema"] = "CINEMA";
4027
4077
  })(TextLogoProduct || (TextLogoProduct = {}));
4028
4078
 
4029
- var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6;
4030
- var TickboxError = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
4079
+ var _templateObject$s, _templateObject2$f, _templateObject3$9, _templateObject4$6;
4080
+ var TickboxError = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-block: 20px;\n color: var(--base-color-", ");\n"])), function (_ref) {
4031
4081
  var dark = _ref.dark;
4032
4082
  return dark ? 'white' : 'errorstate';
4033
4083
  });
@@ -4148,8 +4198,8 @@ var Tickbox = function Tickbox(_ref) {
4148
4198
  }, error)));
4149
4199
  };
4150
4200
 
4151
- var _templateObject$s, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2;
4152
- var Container$2 = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
4201
+ var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2;
4202
+ var Container$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
4153
4203
  var Tickbox$1 = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n z-index: 1;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: ", ";\n background-color: ", ";\n color: ", ";\n"])), function (_ref) {
4154
4204
  var error = _ref.error,
4155
4205
  darkMode = _ref.darkMode,
@@ -4259,8 +4309,8 @@ var Tickbox2 = /*#__PURE__*/forwardRef(function (_ref, ref) {
4259
4309
  }, error)));
4260
4310
  });
4261
4311
 
4262
- var _templateObject$t, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
4263
- var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
4312
+ var _templateObject$u, _templateObject2$h, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
4313
+ var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
4264
4314
  var color = _ref.color;
4265
4315
  return color;
4266
4316
  });
@@ -4368,8 +4418,8 @@ var Timer = function Timer(_ref) {
4368
4418
  }));
4369
4419
  };
4370
4420
 
4371
- var _templateObject$u;
4372
- var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
4421
+ var _templateObject$v;
4422
+ var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
4373
4423
 
4374
4424
  var TypeTags = function TypeTags(_ref) {
4375
4425
  var list = _ref.list;
@@ -5111,8 +5161,8 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
5111
5161
  }
5112
5162
  });
5113
5163
 
5114
- var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
5115
- var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
5164
+ var _templateObject$w, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$4, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10;
5165
+ var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fff;\n border: none;\n padding: 12px;\n cursor: pointer;\n"])));
5116
5166
  var VideoFullscreenButton = /*#__PURE__*/styled.button(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 56px;\n height: 36px;\n background-color: rgb(26, 26, 26, 0.6);\n border-radius: 5px;\n padding: 5px 14px;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])));
5117
5167
  var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0;\n width: 100%;\n"])));
5118
5168
  var VideoControlsInnerWrapper = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 40px 17px 30px;\n"])));
@@ -5331,8 +5381,8 @@ var VideoControls = function VideoControls(_ref2) {
5331
5381
  })));
5332
5382
  };
5333
5383
 
5334
- var _templateObject$w, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$7;
5335
- var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
5384
+ var _templateObject$x, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$7;
5385
+ var StepperWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: left;\n align-items: left;\n"])));
5336
5386
  var StepperError = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n margin-block: 15px 0;\n\n * {\n margin: 0;\n }\n"])), function (_ref) {
5337
5387
  var darkMode = _ref.darkMode;
5338
5388
  return darkMode ? 'white' : 'errorstate';
@@ -5559,8 +5609,8 @@ var Component = function Component(_ref) {
5559
5609
  }, error)));
5560
5610
  };
5561
5611
 
5562
- var _templateObject$x, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
5563
- var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
5612
+ var _templateObject$y, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
5613
+ var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n ", "\n }\n"])), devices.mobileAndTablet, function (_ref) {
5564
5614
  var isMenuOpen = _ref.isMenuOpen;
5565
5615
  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 ";
5566
5616
  });
@@ -5584,8 +5634,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObjec
5584
5634
  var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 3 / span 14;\n }\n"])), devices.desktop);
5585
5635
  var NavTopContainer = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 26px;\n right: 50px;\n top: 20px;\n position: absolute;\n\n @media ", " {\n margin-top: 1px;\n position: inherit;\n }\n"])), devices.mobileAndTablet);
5586
5636
 
5587
- var _templateObject$y;
5588
- var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
5637
+ var _templateObject$z;
5638
+ var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 66px;\n height: auto;\n cursor: pointer;\n & img {\n width: auto;\n height: 100%;\n }\n"])));
5589
5639
 
5590
5640
  var Logo = function Logo(_ref) {
5591
5641
  var _ref$id = _ref.id,
@@ -5593,11 +5643,13 @@ var Logo = function Logo(_ref) {
5593
5643
  _ref$dataRoh = _ref.dataRoh,
5594
5644
  dataRoh = _ref$dataRoh === void 0 ? 'imgLogo' : _ref$dataRoh,
5595
5645
  _ref$urlLink = _ref.urlLink,
5596
- urlLink = _ref$urlLink === void 0 ? 'https://www.roh.org.uk/' : _ref$urlLink,
5646
+ urlLink = _ref$urlLink === void 0 ? 'https://www.rbo.org.uk/' : _ref$urlLink,
5597
5647
  desktopImage = _ref.desktopImage,
5598
5648
  devicesImage = _ref.devicesImage,
5599
5649
  _ref$title = _ref.title,
5600
- title = _ref$title === void 0 ? 'Royal Opera House' : _ref$title;
5650
+ title = _ref$title === void 0 ? 'Royal Ballet and Opera' : _ref$title,
5651
+ _ref$altText = _ref.altText,
5652
+ altText = _ref$altText === void 0 ? 'Royal Ballet and Opera Homepage' : _ref$altText;
5601
5653
  return /*#__PURE__*/React__default.createElement("a", {
5602
5654
  "data-roh": dataRoh,
5603
5655
  rel: "noopener noreferrer",
@@ -5610,15 +5662,16 @@ var Logo = function Logo(_ref) {
5610
5662
  srcSet: devicesImage ? devicesImage : desktopImage,
5611
5663
  media: devices.mobileAndTablet
5612
5664
  }), /*#__PURE__*/React__default.createElement("img", {
5613
- src: desktopImage
5665
+ src: desktopImage,
5666
+ alt: altText
5614
5667
  }))));
5615
5668
  };
5616
5669
 
5617
- var _templateObject$z;
5618
- var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
5670
+ var _templateObject$A;
5671
+ var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
5619
5672
 
5620
- var _templateObject$A, _templateObject2$l, _templateObject3$f, _templateObject4$c;
5621
- var BasketContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
5673
+ var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$c;
5674
+ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n ", "\n"])), function (_ref) {
5622
5675
  var selected = _ref.selected,
5623
5676
  colorPrimary = _ref.colorPrimary;
5624
5677
 
@@ -5806,8 +5859,8 @@ var Basket$1 = function Basket(_ref) {
5806
5859
  }, expiryTime ? basketText : text) : ''));
5807
5860
  };
5808
5861
 
5809
- var _templateObject$B, _templateObject2$m;
5810
- var SearchContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
5862
+ var _templateObject$C, _templateObject2$m;
5863
+ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
5811
5864
  var selected = _ref.selected,
5812
5865
  colorPrimary = _ref.colorPrimary;
5813
5866
 
@@ -6099,8 +6152,8 @@ var NavTop = function NavTop(_ref) {
6099
6152
  }));
6100
6153
  };
6101
6154
 
6102
- var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$d;
6103
- var TabsContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
6155
+ var _templateObject$D, _templateObject2$n, _templateObject3$g, _templateObject4$d;
6156
+ var TabsContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n"])));
6104
6157
  var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n column-gap: 32px;\n\n @media ", " {\n column-gap: 15px;\n }\n\n @media ", ", ", " {\n div:last-child > div {\n right: 1px;\n }\n }\n\n @media ", " {\n ", "\n }\n"])), devices.desktop, devices.desktop, devices.largeDesktop, devices.mobileAndTablet, function (props) {
6105
6158
  if (props.showMenu) {
6106
6159
  return "\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n ";
@@ -6242,8 +6295,8 @@ var Tabs = function Tabs(_ref) {
6242
6295
  }, "MENU"))));
6243
6296
  };
6244
6297
 
6245
- var _templateObject$D, _templateObject2$o, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
6246
- var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__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);
6298
+ var _templateObject$E, _templateObject2$o, _templateObject3$h, _templateObject5$9, _templateObject6$6, _templateObject7$3;
6299
+ var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__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);
6247
6300
  var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-xlarge-gap);\n height: var(--navigation-xlarge-gap);\n }\n"])));
6248
6301
  var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n\n :hover {\n cursor: pointer;\n && svg path {\n fill: var(--base-color-navigation);\n }\n }\n"])));
6249
6302
  var InputContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: blue;\n width: 100%;\n\n input {\n font-size: var(--font-size-search);\n font-family: var(--font-family-search);\n border: none;\n border-radius: 0;\n outline: none;\n outline-color: var(--base-color-white);\n height: 48px;\n box-sizing: border-box;\n width: 100%;\n -webkit-appearance: none;\n\n &.search-input {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n @media ", " {\n column-gap: 24px;\n }\n }\n"])), devices.mobile);
@@ -6480,16 +6533,16 @@ var Navigation = function Navigation(_ref) {
6480
6533
  })))));
6481
6534
  };
6482
6535
 
6483
- var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
6484
- var FooterSection = /*#__PURE__*/styled.section(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
6536
+ var _templateObject$F, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$7;
6537
+ var FooterSection = /*#__PURE__*/styled.section(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
6485
6538
  var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__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"])));
6486
6539
  var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
6487
6540
  var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
6488
6541
  var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
6489
6542
  var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row4;\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-3);\n line-height: var(--line-height-body-3);\n text-align: center;\n margin: 0;\n padding: 0;\n\n @media ", " {\n text-align: left;\n }\n"])), devices.mobile);
6490
6543
 
6491
- var _templateObject$F, _templateObject2$q, _templateObject3$j;
6492
- var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$F || (_templateObject$F = /*#__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);
6544
+ var _templateObject$G, _templateObject2$q, _templateObject3$j;
6545
+ var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$G || (_templateObject$G = /*#__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);
6493
6546
  var PolicyLinkItem = /*#__PURE__*/styled.li(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n text-align: center;\n\n @media ", " {\n & {\n text-align: left;\n }\n }\n"])), devices.mobile);
6494
6547
  var PolicyLink = /*#__PURE__*/styled.a(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: fit-content;\n text-decoration: none;\n text-transform: uppercase;\n color: var(--base-color-white);\n cursor: pointer;\n"])));
6495
6548
 
@@ -6507,8 +6560,8 @@ var PolicyLinks = function PolicyLinks(_ref) {
6507
6560
  }));
6508
6561
  };
6509
6562
 
6510
- var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
6511
- var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__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);
6563
+ var _templateObject$H, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
6564
+ var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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);
6512
6565
  var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__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);
6513
6566
  var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1;\n padding-top: 9px;\n justify-self: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media ", " {\n & {\n grid-column: auto;\n align-items: start;\n justify-self: start;\n padding-top: 0;\n }\n }\n"])), devices.mobile);
6514
6567
  var SignUpText = /*#__PURE__*/styled.p(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-body-2);\n line-height: var(--line-height-body-2);\n width: 60%;\n margin: 0 auto;\n height: 60px;\n text-align: center;\n\n @media ", " {\n & {\n width: 100%;\n height: auto;\n text-align: left;\n font-size: 14px;\n margin-bottom: var(--footer-vertical-spacing-lg);\n }\n }\n"])), devices.mobile);
@@ -6579,9 +6632,9 @@ var Footer = function Footer(_ref) {
6579
6632
  }, additionalInfo)))));
6580
6633
  };
6581
6634
 
6582
- var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9;
6635
+ var _templateObject$I, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$c, _templateObject6$9;
6583
6636
  var LIST_ITEM_GAP = 32;
6584
- var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__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) {
6637
+ var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__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) {
6585
6638
  var bottomBorder = _ref.bottomBorder;
6586
6639
  return bottomBorder ? '2px solid var(--base-color-light-grey)' : 'none';
6587
6640
  }, zIndexes.anchor);
@@ -6845,8 +6898,8 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
6845
6898
  })) : null) : null))));
6846
6899
  };
6847
6900
 
6848
- var _templateObject$I, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
6849
- var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
6901
+ var _templateObject$J, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
6902
+ var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
6850
6903
  var sticky = _ref.sticky;
6851
6904
  return sticky ? 'sticky' : 'initial';
6852
6905
  }, zIndexes.anchor);
@@ -6906,8 +6959,8 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
6906
6959
  }, message)));
6907
6960
  };
6908
6961
 
6909
- var _templateObject$J, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
6910
- var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__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);
6962
+ var _templateObject$K, _templateObject2$u, _templateObject3$n, _templateObject4$i, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
6963
+ var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__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);
6911
6964
  var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
6912
6965
  var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
6913
6966
  var theme = _ref.theme;
@@ -6987,8 +7040,8 @@ var UpsellCard = function UpsellCard(_ref) {
6987
7040
  }), link && /*#__PURE__*/React__default.createElement(ButtonContainer, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link), truncate(link.text, LENGTH_SMALL_TEXT)))));
6988
7041
  };
6989
7042
 
6990
- var _templateObject$K;
6991
- var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
7043
+ var _templateObject$L;
7044
+ var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 75px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n padding-left: 0;\n padding-right: 0;\n }\n\n @media ", " {\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.tablet, devices.mobile);
6992
7045
 
6993
7046
  var UpsellCards = function UpsellCards(_ref) {
6994
7047
  var upsellCards = _ref.upsellCards;
@@ -7006,16 +7059,16 @@ var UpsellCards = function UpsellCards(_ref) {
7006
7059
  }));
7007
7060
  };
7008
7061
 
7009
- var _templateObject$L, _templateObject2$v, _templateObject3$o;
7010
- var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
7062
+ var _templateObject$M, _templateObject2$v, _templateObject3$o;
7063
+ var UpsellBorderBox = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: ", ";\n padding: 80px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding-top: 2.5em;\n padding-left: 0;\n padding-right: 0;\n padding-bottom: 2.5em;\n }\n }\n\n @media ", " {\n & {\n padding: 25px;\n padding-top: 2.5em;\n }\n }\n"])), function (_ref) {
7011
7064
  var theme = _ref.theme;
7012
7065
  return theme.colors.primary;
7013
7066
  }, devices.mobile, devices.tablet);
7014
7067
  var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n }\n"])), devices.mobile);
7015
7068
  var TextContainer = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 2.5em;\n div > :first-child {\n margin-top: 1.5em;\n }\n\n @media ", " {\n margin-top: 0;\n div > :first-child {\n margin-top: 0.5em;\n }\n }\n\n @media ", " {\n margin-left: 1.5em;\n margin-right: 1.5em;\n & {\n div > :first-child {\n margin-top: 1em;\n }\n }\n }\n"])), devices.tablet, devices.mobile);
7016
7069
 
7017
- var _templateObject$M, _templateObject2$w, _templateObject3$p, _templateObject4$j, _templateObject5$e;
7018
- var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
7070
+ var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$j, _templateObject5$e;
7071
+ var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
7019
7072
  var LineContainer = /*#__PURE__*/styled.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-lightgrey);\n width: 100%;\n"])));
7020
7073
  var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n"])), devices.mobile);
7021
7074
  var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
@@ -7144,8 +7197,8 @@ var Accordion = function Accordion(_ref) {
7144
7197
  }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
7145
7198
  };
7146
7199
 
7147
- var _templateObject$N;
7148
- var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
7200
+ var _templateObject$O;
7201
+ var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
7149
7202
 
7150
7203
  var Accordions = function Accordions(_ref) {
7151
7204
  var _ref$items = _ref.items,
@@ -7163,7 +7216,8 @@ var Accordions = function Accordions(_ref) {
7163
7216
  visibleStandfirst: accordion.visibleStandfirst,
7164
7217
  contentType: accordion.contentType,
7165
7218
  displayLevel: accordion.displayLevel,
7166
- semanticLevel: accordion.semanticLevel
7219
+ semanticLevel: accordion.semanticLevel,
7220
+ initOpen: accordion.initOpen
7167
7221
  }, accordion.children);
7168
7222
  }));
7169
7223
  };
@@ -7177,8 +7231,8 @@ var Theme = function Theme(_ref) {
7177
7231
  }, children);
7178
7232
  };
7179
7233
 
7180
- var _templateObject$O, _templateObject2$x, _templateObject3$q;
7181
- var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
7234
+ var _templateObject$P, _templateObject2$x, _templateObject3$q;
7235
+ var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: ", ";\n color: var(--base-color-white);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), function (_ref) {
7182
7236
  var theme = _ref.theme;
7183
7237
  return theme.colors.primary;
7184
7238
  }, devices.mobile);
@@ -7220,8 +7274,8 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
7220
7274
  }))))));
7221
7275
  };
7222
7276
 
7223
- var _templateObject$P;
7224
- var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
7277
+ var _templateObject$Q;
7278
+ var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), function (_ref) {
7225
7279
  var bgColor = _ref.bgColor,
7226
7280
  theme = _ref.theme;
7227
7281
  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
@@ -7242,11 +7296,11 @@ var AuxiliaryButton = function AuxiliaryButton(_ref) {
7242
7296
  }), children);
7243
7297
  };
7244
7298
 
7245
- var _templateObject$Q, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
7299
+ var _templateObject$R, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$f, _templateObject6$c, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
7246
7300
  var LENGTH_LARGE_TEXT = 28;
7247
7301
  var LENGTH_SMALL_TEXT$1 = 19;
7248
7302
  var LENGTH_TEXT_TABLET = 10;
7249
- var CardContainer = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
7303
+ var CardContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
7250
7304
  var isCardClickable = _ref.isCardClickable;
7251
7305
  return isCardClickable ? 'pointer' : 'default';
7252
7306
  }, function (_ref2) {
@@ -7528,9 +7582,9 @@ var Card = function Card(_ref) {
7528
7582
  dangerouslySetInnerHTML: {
7529
7583
  __html: truncatedText
7530
7584
  }
7531
- }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7585
+ }))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7532
7586
  level: 1
7533
- }, highlightText)))), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
7587
+ }, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
7534
7588
  fullWidth: fullWidth
7535
7589
  }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
7536
7590
  ref: node,
@@ -7544,8 +7598,8 @@ var Card = function Card(_ref) {
7544
7598
  }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
7545
7599
  };
7546
7600
 
7547
- var _templateObject$R, _templateObject2$z;
7548
- var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
7601
+ var _templateObject$S, _templateObject2$z;
7602
+ var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
7549
7603
  var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
7550
7604
 
7551
7605
  var Cards = function Cards(_ref) {
@@ -7591,8 +7645,8 @@ var Cards = function Cards(_ref) {
7591
7645
  }));
7592
7646
  };
7593
7647
 
7594
- var _templateObject$S, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$g;
7595
- var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
7648
+ var _templateObject$T, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$g;
7649
+ var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
7596
7650
  var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
7597
7651
  var hideBottomBorder = _ref.hideBottomBorder;
7598
7652
  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
@@ -7660,8 +7714,8 @@ var ContactCard = function ContactCard(_ref) {
7660
7714
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
7661
7715
  };
7662
7716
 
7663
- var _templateObject$T, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$d, _templateObject7$8;
7664
- var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7717
+ var _templateObject$U, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$d, _templateObject7$8;
7718
+ var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7665
7719
  var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$B || (_templateObject2$B = /*#__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) {
7666
7720
  return props.clickable ? 'pointer' : 'default';
7667
7721
  }, devices.mobile);
@@ -7743,8 +7797,8 @@ var ContentSummary = function ContentSummary(_ref) {
7743
7797
  }), link.text)));
7744
7798
  };
7745
7799
 
7746
- var _templateObject$U, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$i;
7747
- var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
7800
+ var _templateObject$V, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$i;
7801
+ var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
7748
7802
  var imageToLeft = _ref.imageToLeft;
7749
7803
  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
7750
7804
  }, devices.mobile);
@@ -7821,8 +7875,8 @@ var BackgroundColour;
7821
7875
  BackgroundColour["White"] = "white";
7822
7876
  })(BackgroundColour || (BackgroundColour = {}));
7823
7877
 
7824
- var _templateObject$V, _templateObject2$D, _templateObject3$v, _templateObject4$o;
7825
- var InfoContent = /*#__PURE__*/styled('div')(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
7878
+ var _templateObject$W, _templateObject2$D, _templateObject3$v, _templateObject4$o;
7879
+ var InfoContent = /*#__PURE__*/styled('div')(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
7826
7880
  var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7827
7881
  var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
7828
7882
  if (!props.infoThemed) {
@@ -7948,8 +8002,8 @@ var Information = function Information(_ref) {
7948
8002
  }))));
7949
8003
  };
7950
8004
 
7951
- var _templateObject$W, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
7952
- var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__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) {
8005
+ var _templateObject$X, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$j, _templateObject6$e, _templateObject7$9, _templateObject8$7;
8006
+ var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
7953
8007
  var theme = _ref.theme;
7954
8008
  return theme.colors.primary;
7955
8009
  }, function (_ref2) {
@@ -8049,8 +8103,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
8049
8103
  })));
8050
8104
  };
8051
8105
 
8052
- var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
8053
- var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__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);
8106
+ var _templateObject$Y, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$a, _templateObject8$8;
8107
+ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__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);
8054
8108
  var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__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);
8055
8109
  var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
8056
8110
  var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
@@ -8123,8 +8177,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
8123
8177
  }, "Scroll Down")) : null);
8124
8178
  };
8125
8179
 
8126
- var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$l;
8127
- var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
8180
+ var _templateObject$Z, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$l;
8181
+ var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
8128
8182
  var color = _ref.color;
8129
8183
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
8130
8184
  }, devices.mobileAndTablet);
@@ -8168,8 +8222,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
8168
8222
  }))));
8169
8223
  };
8170
8224
 
8171
- var _templateObject$Z;
8172
- var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
8225
+ var _templateObject$_;
8226
+ var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
8173
8227
 
8174
8228
  var PageHeadingStream = function PageHeadingStream(_ref) {
8175
8229
  var link = _ref.link,
@@ -8189,8 +8243,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
8189
8243
  }))));
8190
8244
  };
8191
8245
 
8192
- var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
8193
- var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__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);
8246
+ var _templateObject$$, _templateObject2$H, _templateObject3$z, _templateObject5$m, _templateObject6$g, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
8247
+ var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__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);
8194
8248
  var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$H || (_templateObject2$H = /*#__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"])));
8195
8249
  var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8196
8250
  var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
@@ -8316,7 +8370,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8316
8370
  var isIOS = function isIOS() {
8317
8371
  try {
8318
8372
  console.warn('Do not use this on server side rendering, it may throw an error.');
8319
- if (typeof navigator === undefined) return false;
8373
+ if (typeof navigator === 'undefined') return false;
8320
8374
  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
8321
8375
  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
8322
8376
  } catch (e) {
@@ -8332,7 +8386,7 @@ var useIOS = function useIOS() {
8332
8386
  setIOS = _useState[1];
8333
8387
 
8334
8388
  useEffect(function () {
8335
- if (typeof navigator === undefined) return;
8389
+ if (typeof navigator === 'undefined') return;
8336
8390
  setIOS(isIOS());
8337
8391
  }, []);
8338
8392
  return IOS;
@@ -8518,8 +8572,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8518
8572
  }), linkText))));
8519
8573
  };
8520
8574
 
8521
- var _templateObject$$, _templateObject2$I, _templateObject3$A, _templateObject4$s;
8522
- var MorePages = /*#__PURE__*/styled.span(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
8575
+ var _templateObject$10, _templateObject2$I, _templateObject3$A, _templateObject4$s;
8576
+ var MorePages = /*#__PURE__*/styled.span(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
8523
8577
  var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
8524
8578
 
8525
8579
  var PageNumber = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
@@ -8595,8 +8649,8 @@ var Pagination = function Pagination(_ref) {
8595
8649
  }))));
8596
8650
  };
8597
8651
 
8598
- var _templateObject$10, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$n, _templateObject6$h;
8599
- var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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);
8652
+ var _templateObject$11, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$n, _templateObject6$h;
8653
+ var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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);
8600
8654
  var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
8601
8655
  var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
8602
8656
  var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
@@ -8652,11 +8706,11 @@ var PeopleListing = function PeopleListing(_ref) {
8652
8706
  }));
8653
8707
  };
8654
8708
 
8655
- var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
8656
- var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8709
+ var _templateObject$12, _templateObject2$K, _templateObject3$C, _templateObject4$u;
8710
+ var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8657
8711
  var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
8658
- var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8659
- var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8712
+ var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
8713
+ var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
8660
8714
 
8661
8715
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
8662
8716
  return array.reduce(function (acc, item) {
@@ -8667,12 +8721,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
8667
8721
  var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
8668
8722
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
8669
8723
  if (musicTitle.length > 1 && index === musicTitle.length - 1) {
8670
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
8724
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
8725
+ key: index
8726
+ }, title));
8671
8727
  } else if (index > 0) {
8672
- return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
8728
+ return /*#__PURE__*/React__default.createElement("i", {
8729
+ key: index
8730
+ }, ", ", title);
8673
8731
  }
8674
8732
 
8675
- return /*#__PURE__*/React__default.createElement("i", null, title);
8733
+ return /*#__PURE__*/React__default.createElement("i", {
8734
+ key: index
8735
+ }, title);
8676
8736
  }));
8677
8737
  };
8678
8738
 
@@ -8724,14 +8784,14 @@ var CreditListing = function CreditListing(_ref) {
8724
8784
  }));
8725
8785
  };
8726
8786
 
8727
- var _templateObject$12, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
8787
+ var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
8728
8788
  var LENGTH_TEXT = 28;
8729
8789
  var LENGTH_TEXT_TABLET$1 = 12;
8730
8790
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
8731
8791
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
8732
8792
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
8733
8793
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
8734
- var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
8794
+ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
8735
8795
  var imageToLeft = _ref.imageToLeft;
8736
8796
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
8737
8797
  }, devices.tablet, function (_ref2) {
@@ -9002,10 +9062,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
9002
9062
  }))));
9003
9063
  };
9004
9064
 
9005
- var _templateObject$13, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$d;
9065
+ var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$d;
9006
9066
  var LENGTH_TEXT$2 = 28;
9007
9067
  var LENGTH_TEXT_TABLET$2 = 10;
9008
- var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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) {
9068
+ var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
9009
9069
  var imageToLeft = _ref.imageToLeft;
9010
9070
  return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
9011
9071
  }, devices.tablet, function (_ref2) {
@@ -9058,8 +9118,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
9058
9118
  return '';
9059
9119
  });
9060
9120
 
9061
- var _templateObject$14;
9062
- var VideoContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
9121
+ var _templateObject$15;
9122
+ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
9063
9123
  var _ref$aspectRatio = _ref.aspectRatio,
9064
9124
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
9065
9125
  return aspectRatio;
@@ -9263,8 +9323,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9263
9323
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
9264
9324
  };
9265
9325
 
9266
- var _templateObject$15;
9267
- var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9326
+ var _templateObject$16;
9327
+ var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9268
9328
 
9269
9329
  /**
9270
9330
  * DEPRECATED. Use RadioGroup2 instead
@@ -9322,8 +9382,8 @@ var RadioGroup = function RadioGroup(_ref) {
9322
9382
  })));
9323
9383
  };
9324
9384
 
9325
- var _templateObject$16, _templateObject2$N, _templateObject3$F;
9326
- var Container$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9385
+ var _templateObject$17, _templateObject2$N, _templateObject3$F;
9386
+ var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9327
9387
  var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9328
9388
  var horizontalMode = _ref.horizontalMode;
9329
9389
  if (horizontalMode) return 'row';
@@ -9412,8 +9472,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
9412
9472
  }, error)));
9413
9473
  };
9414
9474
 
9415
- var _templateObject$17, _templateObject2$O, _templateObject3$G;
9416
- var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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);
9475
+ var _templateObject$18, _templateObject2$O, _templateObject3$G;
9476
+ var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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);
9417
9477
  var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__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"])));
9418
9478
  var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
9419
9479
 
@@ -9477,8 +9537,8 @@ var StatusBanner = function StatusBanner(_ref) {
9477
9537
  })))));
9478
9538
  };
9479
9539
 
9480
- var _templateObject$18;
9481
- var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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);
9540
+ var _templateObject$19;
9541
+ var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__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);
9482
9542
 
9483
9543
  var SectionTitle = function SectionTitle(_ref) {
9484
9544
  var title = _ref.title,
@@ -9506,8 +9566,8 @@ var SectionTitle = function SectionTitle(_ref) {
9506
9566
  }, description))));
9507
9567
  };
9508
9568
 
9509
- var _templateObject$19, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
9510
- var stateStyles = /*#__PURE__*/css(_templateObject$19 || (_templateObject$19 = /*#__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) {
9569
+ var _templateObject$1a, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
9570
+ var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /*#__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) {
9511
9571
  var theme = _ref.theme;
9512
9572
  return "3px solid " + theme.colors.lapisLazuli;
9513
9573
  }, function (_ref2) {
@@ -9929,8 +9989,8 @@ function Select(_ref3) {
9929
9989
  }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
9930
9990
  }
9931
9991
 
9932
- var _templateObject$1a, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
9933
- var Container$4 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9992
+ var _templateObject$1b, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
9993
+ var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9934
9994
  var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
9935
9995
  var width = _ref.width;
9936
9996
  if (!width) return 'none';
@@ -10069,8 +10129,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
10069
10129
  })));
10070
10130
  };
10071
10131
 
10072
- var _templateObject$1b;
10073
- var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__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) {
10132
+ var _templateObject$1c;
10133
+ var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__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) {
10074
10134
  var theme = _ref.theme;
10075
10135
  return theme.colors.primary;
10076
10136
  });
@@ -10098,8 +10158,8 @@ var TextOnly = function TextOnly(_ref) {
10098
10158
  })));
10099
10159
  };
10100
10160
 
10101
- var _templateObject$1c, _templateObject2$R;
10102
- var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__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) {
10161
+ var _templateObject$1d, _templateObject2$R;
10162
+ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__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) {
10103
10163
  var _ref$aspectRatio = _ref.aspectRatio,
10104
10164
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
10105
10165
  return aspectRatio;
@@ -10147,8 +10207,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10147
10207
  }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
10148
10208
  };
10149
10209
 
10150
- var _templateObject$1d, _templateObject2$S, _templateObject3$J;
10151
- var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
10210
+ var _templateObject$1e, _templateObject2$S, _templateObject3$J;
10211
+ var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
10152
10212
  var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
10153
10213
  var displayAttribution = _ref.displayAttribution;
10154
10214
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
@@ -10177,8 +10237,8 @@ var Quote = function Quote(_ref) {
10177
10237
  }, attribution))));
10178
10238
  };
10179
10239
 
10180
- var _templateObject$1e, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$r, _templateObject6$l;
10181
- var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
10240
+ var _templateObject$1f, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$r, _templateObject6$l;
10241
+ var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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"])));
10182
10242
  var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10183
10243
  var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10184
10244
  var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
@@ -10221,8 +10281,8 @@ var MiniCard = function MiniCard(_ref) {
10221
10281
  }, title)))));
10222
10282
  };
10223
10283
 
10224
- var _templateObject$1f, _templateObject2$U, _templateObject3$L, _templateObject4$A;
10225
- var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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"])));
10284
+ var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A;
10285
+ var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__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"])));
10226
10286
  var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
10227
10287
  var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10228
10288
  var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__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"])));
@@ -10323,15 +10383,113 @@ var ReadMore = function ReadMore(_ref) {
10323
10383
  }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
10324
10384
  };
10325
10385
 
10326
- var _templateObject$1g, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$s;
10327
- var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10328
- var MenuList = /*#__PURE__*/styled.ul(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
10329
- var MobileButton = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
10330
- var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
10386
+ var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$s, _templateObject6$m;
10387
+ var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10388
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10389
+ var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10390
+ var color = _ref.color;
10391
+ return "var(--base-color-" + color + ")";
10392
+ });
10393
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10394
+ var Text = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10395
+ var color = _ref2.color;
10396
+ return "var(--base-color-" + color + ")";
10397
+ });
10398
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10399
+ var color = _ref3.color;
10400
+ return "var(--base-color-" + color + ")";
10401
+ });
10402
+
10403
+ /**
10404
+ * Password strength indicator component.
10405
+ * This renders some number of lines (6 by default)
10406
+ * which should become active when the user improves
10407
+ * the strength of the entered password.
10408
+ *
10409
+ * ## Sections
10410
+ * To set number of sections it should be passed
10411
+ * as `sections` prop.
10412
+ *
10413
+ * ## Active section
10414
+ * To set number of active sections it should be passed
10415
+ * as `activeSections` prop.
10416
+ *
10417
+ * ## Colors
10418
+ * Color of every element can be controlled by properties:
10419
+ * `sectionsColor`, `activeSectionsColor`,
10420
+ * `textColor`, `strengthLabelColor`.
10421
+ *
10422
+ * ## Text
10423
+ * `text` prop is used to render some message.
10424
+ * For example error (together with proper red color)
10425
+ * or some password requirement. It can be empty.
10426
+ *
10427
+ * ## Strength label
10428
+ * `strengthLabel` prop is used to render strength characteristic
10429
+ * of entered password. For example: `weak`, `normal`, `strong`, etc.
10430
+ * It can be empty.
10431
+ */
10432
+
10433
+ var PasswordStrength = function PasswordStrength(_ref) {
10434
+ var _ref$sections = _ref.sections,
10435
+ sections = _ref$sections === void 0 ? 6 : _ref$sections,
10436
+ _ref$activeSections = _ref.activeSections,
10437
+ activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
10438
+ _ref$sectionsColor = _ref.sectionsColor,
10439
+ sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
10440
+ _ref$activeSectionsCo = _ref.activeSectionsColor,
10441
+ activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
10442
+ _ref$text = _ref.text,
10443
+ text = _ref$text === void 0 ? '' : _ref$text,
10444
+ _ref$textColor = _ref.textColor,
10445
+ textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
10446
+ _ref$strengthLabel = _ref.strengthLabel,
10447
+ strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
10448
+ _ref$strengthLabelCol = _ref.strengthLabelColor,
10449
+ strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
10450
+
10451
+ var setSectionColor = function setSectionColor(index) {
10452
+ return index < activeSections ? activeSectionsColor : sectionsColor;
10453
+ };
10454
+
10455
+ var setSectionDataTestId = function setSectionDataTestId(index) {
10456
+ return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
10457
+ };
10458
+
10459
+ return /*#__PURE__*/React__default.createElement(Container$5, {
10460
+ "data-testid": "password-strength-container"
10461
+ }, /*#__PURE__*/React__default.createElement(Sections, {
10462
+ "data-testid": "password-strength-sections"
10463
+ }, Array.from({
10464
+ length: sections
10465
+ }, function (_section, i) {
10466
+ return /*#__PURE__*/React__default.createElement(Section, {
10467
+ key: i,
10468
+ color: setSectionColor(i),
10469
+ "data-testid": setSectionDataTestId(i)
10470
+ });
10471
+ })), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
10472
+ color: textColor,
10473
+ "data-testid": "password-strength-text"
10474
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
10475
+ level: 6
10476
+ }, text)), /*#__PURE__*/React__default.createElement(LabelText, {
10477
+ color: strengthLabelColor,
10478
+ "data-testid": "password-strength-label"
10479
+ }, /*#__PURE__*/React__default.createElement(Overline, {
10480
+ level: 2
10481
+ }, strengthLabel))));
10482
+ };
10483
+
10484
+ var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$t;
10485
+ var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10486
+ var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), Colors.LightGrey);
10487
+ var MobileButton = /*#__PURE__*/styled.button(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey);
10488
+ var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
10331
10489
  var isActive = _ref.isActive;
10332
10490
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
10333
10491
  }, Colors.MidGrey);
10334
- var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10492
+ var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10335
10493
  var isOpen = _ref2.isOpen;
10336
10494
  return isOpen ? 'block' : 'none';
10337
10495
  }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -10501,106 +10659,8 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
10501
10659
  });
10502
10660
  };
10503
10661
 
10504
- var _templateObject$1h, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$t, _templateObject6$m;
10505
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10506
- var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10507
- var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10508
- var color = _ref.color;
10509
- return "var(--base-color-" + color + ")";
10510
- });
10511
- var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10512
- var Text = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10513
- var color = _ref2.color;
10514
- return "var(--base-color-" + color + ")";
10515
- });
10516
- var LabelText = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10517
- var color = _ref3.color;
10518
- return "var(--base-color-" + color + ")";
10519
- });
10520
-
10521
- /**
10522
- * Password strength indicator component.
10523
- * This renders some number of lines (6 by default)
10524
- * which should become active when the user improves
10525
- * the strength of the entered password.
10526
- *
10527
- * ## Sections
10528
- * To set number of sections it should be passed
10529
- * as `sections` prop.
10530
- *
10531
- * ## Active section
10532
- * To set number of active sections it should be passed
10533
- * as `activeSections` prop.
10534
- *
10535
- * ## Colors
10536
- * Color of every element can be controlled by properties:
10537
- * `sectionsColor`, `activeSectionsColor`,
10538
- * `textColor`, `strengthLabelColor`.
10539
- *
10540
- * ## Text
10541
- * `text` prop is used to render some message.
10542
- * For example error (together with proper red color)
10543
- * or some password requirement. It can be empty.
10544
- *
10545
- * ## Strength label
10546
- * `strengthLabel` prop is used to render strength characteristic
10547
- * of entered password. For example: `weak`, `normal`, `strong`, etc.
10548
- * It can be empty.
10549
- */
10550
-
10551
- var PasswordStrength = function PasswordStrength(_ref) {
10552
- var _ref$sections = _ref.sections,
10553
- sections = _ref$sections === void 0 ? 6 : _ref$sections,
10554
- _ref$activeSections = _ref.activeSections,
10555
- activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
10556
- _ref$sectionsColor = _ref.sectionsColor,
10557
- sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
10558
- _ref$activeSectionsCo = _ref.activeSectionsColor,
10559
- activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
10560
- _ref$text = _ref.text,
10561
- text = _ref$text === void 0 ? '' : _ref$text,
10562
- _ref$textColor = _ref.textColor,
10563
- textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
10564
- _ref$strengthLabel = _ref.strengthLabel,
10565
- strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
10566
- _ref$strengthLabelCol = _ref.strengthLabelColor,
10567
- strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
10568
-
10569
- var setSectionColor = function setSectionColor(index) {
10570
- return index < activeSections ? activeSectionsColor : sectionsColor;
10571
- };
10572
-
10573
- var setSectionDataTestId = function setSectionDataTestId(index) {
10574
- return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
10575
- };
10576
-
10577
- return /*#__PURE__*/React__default.createElement(Container$5, {
10578
- "data-testid": "password-strength-container"
10579
- }, /*#__PURE__*/React__default.createElement(Sections, {
10580
- "data-testid": "password-strength-sections"
10581
- }, Array.from({
10582
- length: sections
10583
- }, function (_section, i) {
10584
- return /*#__PURE__*/React__default.createElement(Section, {
10585
- key: i,
10586
- color: setSectionColor(i),
10587
- "data-testid": setSectionDataTestId(i)
10588
- });
10589
- })), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
10590
- color: textColor,
10591
- "data-testid": "password-strength-text"
10592
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
10593
- level: 6
10594
- }, text)), /*#__PURE__*/React__default.createElement(LabelText, {
10595
- color: strengthLabelColor,
10596
- "data-testid": "password-strength-label"
10597
- }, /*#__PURE__*/React__default.createElement(Overline, {
10598
- level: 2
10599
- }, strengthLabel))));
10600
- };
10601
-
10602
- var _templateObject$1i, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
10603
- var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10662
+ var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$u, _templateObject6$n, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7, _templateObject11$4;
10663
+ var TableContainer = /*#__PURE__*/styled.table(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10604
10664
  var Container$6 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10605
10665
  var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10606
10666
  var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
@@ -10619,14 +10679,73 @@ var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject8$c || (_templateOb
10619
10679
  });
10620
10680
  var Next = /*#__PURE__*/styled.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
10621
10681
  var ScrollButtons = /*#__PURE__*/styled.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
10682
+ var AriaDescription = /*#__PURE__*/styled.span(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10622
10683
 
10623
- var Table = function Table(_ref) {
10624
- var columns = _ref.columns,
10625
- headings = _ref.headings,
10626
- children = _ref.children,
10627
- lineColors = _ref.lineColors,
10628
- rowsPerPage = _ref.rowsPerPage,
10629
- pagination = _ref.pagination;
10684
+ var Content = function Content(_ref) {
10685
+ var content = _ref.content;
10686
+ return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
10687
+ dangerouslySetInnerHTML: {
10688
+ __html: content
10689
+ }
10690
+ }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
10691
+ };
10692
+
10693
+ var Cell = function Cell(_ref2) {
10694
+ var cell = _ref2.cell,
10695
+ cellIndex = _ref2.cellIndex,
10696
+ columns = _ref2.columns;
10697
+ return /*#__PURE__*/React__default.createElement(TableCell, {
10698
+ key: cellIndex,
10699
+ columns: columns,
10700
+ role: "gridcell"
10701
+ }, /*#__PURE__*/React__default.createElement(Content, {
10702
+ content: cell
10703
+ }));
10704
+ };
10705
+
10706
+ var Row = function Row(_ref3) {
10707
+ var row = _ref3.row,
10708
+ rowIndex = _ref3.rowIndex,
10709
+ columns = _ref3.columns,
10710
+ lineColor = _ref3.lineColor;
10711
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
10712
+ key: rowIndex
10713
+ }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
10714
+ return /*#__PURE__*/React__default.createElement(Cell, {
10715
+ key: index,
10716
+ cell: cell,
10717
+ cellIndex: index,
10718
+ columns: columns
10719
+ });
10720
+ })), /*#__PURE__*/React__default.createElement("tr", {
10721
+ "aria-hidden": "true"
10722
+ }, /*#__PURE__*/React__default.createElement("td", {
10723
+ colSpan: columns,
10724
+ "aria-hidden": "true"
10725
+ }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10726
+ lineColor: lineColor
10727
+ }))));
10728
+ };
10729
+
10730
+ var scrollTable = function scrollTable(tableRef, direction) {
10731
+ if (tableRef.current) {
10732
+ var currentScroll = tableRef.current.scrollLeft;
10733
+ var scrollAmount = direction === 'left' ? -300 : 300;
10734
+ tableRef.current.scrollTo({
10735
+ left: currentScroll + scrollAmount,
10736
+ behavior: 'smooth'
10737
+ });
10738
+ }
10739
+ };
10740
+
10741
+ var Table = function Table(_ref4) {
10742
+ var columns = _ref4.columns,
10743
+ headings = _ref4.headings,
10744
+ children = _ref4.children,
10745
+ lineColors = _ref4.lineColors,
10746
+ rowsPerPage = _ref4.rowsPerPage,
10747
+ pagination = _ref4.pagination,
10748
+ description = _ref4.description;
10630
10749
 
10631
10750
  var _useState = useState(0),
10632
10751
  currentPage = _useState[0],
@@ -10636,121 +10755,71 @@ var Table = function Table(_ref) {
10636
10755
  showScrollButtons = _useState2[0],
10637
10756
  setShowScrollButtons = _useState2[1];
10638
10757
 
10639
- var Content = function Content(_ref2) {
10640
- var content = _ref2.content;
10641
- return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
10642
- dangerouslySetInnerHTML: {
10643
- __html: content
10644
- }
10645
- }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
10646
- };
10647
-
10648
- var Cell = function Cell(_ref3) {
10649
- var cell = _ref3.cell,
10650
- cellIndex = _ref3.cellIndex,
10651
- columns = _ref3.columns;
10652
- return /*#__PURE__*/React__default.createElement(TableCell, {
10653
- key: cellIndex,
10654
- columns: columns
10655
- }, /*#__PURE__*/React__default.createElement(Content, {
10656
- content: cell
10657
- }));
10658
- };
10659
-
10660
- var Row = function Row(_ref4) {
10661
- var row = _ref4.row,
10662
- rowIndex = _ref4.rowIndex,
10663
- columns = _ref4.columns,
10664
- lineColor = _ref4.lineColor;
10665
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
10666
- key: rowIndex
10667
- }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
10668
- return /*#__PURE__*/React__default.createElement(Cell, {
10669
- key: index,
10670
- cell: cell,
10671
- cellIndex: index,
10672
- columns: columns
10673
- });
10674
- })), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
10675
- colSpan: columns
10676
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10677
- lineColor: lineColor,
10678
- role: "presentation"
10679
- }))));
10680
- };
10681
-
10682
10758
  var lineColor = lineColors != null ? lineColors : Colors.Cinema;
10683
10759
  var tableRef = useRef(null);
10684
- useEffect(function () {
10685
- if (tableRef.current) {
10686
- tableRef.current.scrollTo(0, 0);
10687
- }
10688
- }, [children]);
10689
-
10690
- var horizontalScroll = function horizontalScroll() {
10691
- if (tableRef.current) {
10692
- setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
10693
- }
10694
- };
10760
+ useLayoutEffect(function () {
10761
+ var horizontalScroll = function horizontalScroll() {
10762
+ if (tableRef.current) {
10763
+ setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
10764
+ }
10765
+ };
10695
10766
 
10696
- useEffect(function () {
10697
10767
  horizontalScroll();
10698
10768
  window.addEventListener('resize', horizontalScroll);
10769
+ console.log('~~~ horizontal Scroll ~~~');
10699
10770
  return function () {
10700
10771
  return window.removeEventListener('resize', horizontalScroll);
10701
10772
  };
10702
10773
  }, []);
10703
-
10704
- var scrollTable = function scrollTable(direction) {
10705
- if (tableRef.current) {
10706
- var currentScroll = tableRef.current.scrollLeft;
10707
- var scrollAmount = direction === 'left' ? -300 : 300;
10708
- tableRef.current.scrollTo({
10709
- left: currentScroll + scrollAmount,
10710
- behavior: 'smooth'
10711
- });
10712
- }
10713
- };
10714
-
10715
- var totalRows = Array.isArray(children) ? children.length : 0;
10774
+ var totalRows = Array.isArray(children) ? children.length + 1 : 1;
10716
10775
  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
10717
- var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
10718
10776
  var pageNumbers = Array.from({
10719
10777
  length: totalPages
10720
10778
  }, function (_, i) {
10721
10779
  return i;
10722
10780
  });
10723
10781
  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
10782
+ var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
10783
+ var visibleRows = pagination ? Array.isArray(currentRows) ? currentRows.length + 1 : 0 : totalRows;
10724
10784
  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
10725
10785
  onClickPrev: function onClickPrev() {
10726
- return scrollTable('left');
10786
+ return scrollTable(tableRef, 'left');
10727
10787
  },
10728
10788
  onClickNext: function onClickNext() {
10729
- return scrollTable('right');
10789
+ return scrollTable(tableRef, 'right');
10730
10790
  }
10731
10791
  })), /*#__PURE__*/React__default.createElement(Container$6, {
10732
10792
  role: "table",
10733
10793
  tabIndex: 0,
10734
- ref: tableRef
10735
- }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
10736
- colSpan: columns
10737
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10738
- lineColor: lineColor,
10739
- role: "presentation"
10740
- })))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
10794
+ ref: tableRef,
10795
+ "aria-rowcount": totalRows,
10796
+ "aria-colcount": columns
10797
+ }, /*#__PURE__*/React__default.createElement(AriaDescription, {
10798
+ id: "table-description"
10799
+ }, description, " visible rows: ", visibleRows), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", {
10800
+ role: "rowgroup"
10801
+ }, ' ', /*#__PURE__*/React__default.createElement("tr", {
10802
+ role: "columnheader"
10803
+ }, headings && headings.map(function (heading, index) {
10741
10804
  return /*#__PURE__*/React__default.createElement(TableHeader, {
10742
10805
  key: index,
10743
10806
  role: "columnheader",
10807
+ scope: "col",
10744
10808
  columns: columns
10745
10809
  }, /*#__PURE__*/React__default.createElement(Content, {
10746
10810
  content: heading
10747
10811
  }));
10748
- }))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
10749
- colSpan: columns
10812
+ })), /*#__PURE__*/React__default.createElement("tr", {
10813
+ "aria-hidden": "true"
10814
+ }, ' ', /*#__PURE__*/React__default.createElement("td", {
10815
+ colSpan: columns,
10816
+ "aria-hidden": "true"
10750
10817
  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
10751
10818
  lineColor: lineColor,
10752
10819
  role: "presentation"
10753
- }))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
10820
+ })))), /*#__PURE__*/React__default.createElement("tbody", {
10821
+ role: "rowgroup"
10822
+ }, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
10754
10823
  return /*#__PURE__*/React__default.createElement(Row, {
10755
10824
  key: rowIndex,
10756
10825
  row: row,
@@ -10758,7 +10827,9 @@ var Table = function Table(_ref) {
10758
10827
  columns: columns,
10759
10828
  lineColor: lineColor
10760
10829
  });
10761
- }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
10830
+ }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AriaDescription, {
10831
+ id: "pagination-description"
10832
+ }, "Table pagination: current page ", currentPage + 1, " of ", totalPages), /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
10762
10833
  key: "previous-page",
10763
10834
  onClick: function onClick() {
10764
10835
  return setCurrentPage(currentPage - 1);
@@ -10793,7 +10864,7 @@ var Table = function Table(_ref) {
10793
10864
  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
10794
10865
  iconName: "DropdownArrow",
10795
10866
  direction: "up"
10796
- })))))));
10867
+ }))))))));
10797
10868
  };
10798
10869
 
10799
10870
  var UpsellSection = function UpsellSection(_ref) {
@@ -10884,8 +10955,8 @@ var LiveChat = function LiveChat() {
10884
10955
  });
10885
10956
  };
10886
10957
 
10887
- var _templateObject$1j, _templateObject2$Y;
10888
- var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
10958
+ var _templateObject$1k, _templateObject2$Y;
10959
+ var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
10889
10960
  var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__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) {
10890
10961
  var hideBottomBorder = _ref.hideBottomBorder;
10891
10962
  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
@@ -10914,8 +10985,8 @@ var StickyBar = function StickyBar(_ref) {
10914
10985
  }, children)));
10915
10986
  };
10916
10987
 
10917
- var _templateObject$1k, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
10918
- var InnerModal = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__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);
10988
+ var _templateObject$1l, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
10989
+ var InnerModal = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__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);
10919
10990
  var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Z || (_templateObject2$Z = /*#__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);
10920
10991
  var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10921
10992
  var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
@@ -11038,8 +11109,8 @@ var ModalWindow = function ModalWindow(_ref) {
11038
11109
  })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
11039
11110
  };
11040
11111
 
11041
- var _templateObject$1l;
11042
- var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
11112
+ var _templateObject$1m;
11113
+ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1m || (_templateObject$1m = /*#__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) {
11043
11114
  var theme = _ref.theme;
11044
11115
  return theme.colors.primary;
11045
11116
  }, function (_ref2) {
@@ -11980,5 +12051,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1l || (_templa
11980
12051
  return theme.fonts.tablet.sizes.body[1];
11981
12052
  }, devices.desktop, devices.largeDesktop);
11982
12053
 
11983
- export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
12054
+ export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, GridItemLegacy, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
11984
12055
  //# sourceMappingURL=chord.esm.js.map