@royaloperahouse/harmonic 0.12.1-c → 0.13.0

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.
Files changed (33) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/README.GIT +278 -0
  3. package/README.md +43 -252
  4. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  6. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  7. package/dist/components/index.d.ts +2 -2
  8. package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
  9. package/dist/components/molecules/Information/Information.style.d.ts +2 -3
  10. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  11. package/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
  12. package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
  13. package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +2 -2
  14. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +3 -273
  15. package/dist/components/molecules/index.d.ts +2 -2
  16. package/dist/harmonic.cjs.development.css +0 -319
  17. package/dist/harmonic.cjs.development.js +132 -194
  18. package/dist/harmonic.cjs.development.js.map +1 -1
  19. package/dist/harmonic.cjs.production.min.js +1 -1
  20. package/dist/harmonic.cjs.production.min.js.map +1 -1
  21. package/dist/harmonic.esm.js +141 -205
  22. package/dist/harmonic.esm.js.map +1 -1
  23. package/dist/index.d.ts +2 -2
  24. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  25. package/dist/types/impactHeader.d.ts +2 -20
  26. package/dist/types/types.d.ts +4 -68
  27. package/package.json +1 -1
  28. package/dist/components/molecules/CastFilter/CastFilters.d.ts +0 -4
  29. package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -14
  30. package/dist/components/molecules/CastFilter/index.d.ts +0 -2
  31. package/dist/components/molecules/PageHeading/Highlight/Highlight.d.ts +0 -4
  32. package/dist/components/molecules/PageHeading/Highlight/Highlight.style.d.ts +0 -9
  33. package/dist/components/molecules/PageHeading/Highlight/index.d.ts +0 -2
@@ -2567,7 +2567,7 @@ var Button = function Button(_ref) {
2567
2567
  }, [href, onClick]);
2568
2568
  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({
2569
2569
  role: href ? undefined : 'button',
2570
- tabIndex: 0
2570
+ tabIndex: href ? undefined : 0
2571
2571
  }, rest, {
2572
2572
  href: href != null ? href : '#',
2573
2573
  onClick: handleClick,
@@ -2804,8 +2804,7 @@ var TertiaryButton = function TertiaryButton(_ref) {
2804
2804
  "data-testid": "tertiary-button"
2805
2805
  }, rest, {
2806
2806
  className: className,
2807
- onClick: handleClick,
2808
- tabIndex: 0
2807
+ onClick: handleClick
2809
2808
  }), /*#__PURE__*/React__default.createElement(ButtonText, {
2810
2809
  color: "inherit"
2811
2810
  }, truncatedString), /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
@@ -2841,7 +2840,7 @@ var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject
2841
2840
  var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n width: max-content;\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n\n ", "\n"])), function (_ref) {
2842
2841
  var active = _ref.active;
2843
2842
  if (active) {
2844
- return "\n & {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n }\n ";
2843
+ return "\n & {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n } \n ";
2845
2844
  }
2846
2845
  return '';
2847
2846
  });
@@ -2954,8 +2953,7 @@ var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref,
2954
2953
  role: "menuitem",
2955
2954
  "aria-controls": "dropdown-menu",
2956
2955
  "aria-haspopup": "menu",
2957
- "aria-expanded": active,
2958
- tabIndex: 0
2956
+ "aria-expanded": active
2959
2957
  }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
2960
2958
  "data-testid": "dropdown-icon"
2961
2959
  }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -3708,7 +3706,6 @@ var Tab = function Tab(_ref) {
3708
3706
  className = _ref.className,
3709
3707
  role = _ref.role,
3710
3708
  ariaLabel = _ref.ariaLabel,
3711
- tabLinkId = _ref.tabLinkId,
3712
3709
  color = _ref.color;
3713
3710
  var clickHandler = function clickHandler() {
3714
3711
  if (onClick) {
@@ -3739,9 +3736,8 @@ var Tab = function Tab(_ref) {
3739
3736
  tabIndex: 0,
3740
3737
  className: className
3741
3738
  }, /*#__PURE__*/React__default.createElement(TabText, {
3742
- id: tabLinkId,
3743
- trimText: trimText,
3744
3739
  color: color,
3740
+ trimText: trimText,
3745
3741
  withTextInMobile: withTextInMobile,
3746
3742
  "aria-hidden": "true"
3747
3743
  }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -3796,8 +3792,7 @@ var TabLink = function TabLink(_ref) {
3796
3792
  color: color,
3797
3793
  iconName: iconName,
3798
3794
  hoverColor: hoverColor,
3799
- className: "" + typographyStyles.navigationtext + (className ? " " + className : ''),
3800
- tabIndex: 0
3795
+ className: "" + typographyStyles.navigationtext + (className ? " " + className : '')
3801
3796
  }, rest), iconName ? (/*#__PURE__*/React__default.createElement(TabLinkIconWrapper, {
3802
3797
  "data-testid": "tab-link-icon"
3803
3798
  }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -5031,7 +5026,7 @@ var SocialLinks = function SocialLinks(_ref) {
5031
5026
  rel: "noopener noreferrer" // Ensures security for external links
5032
5027
  ,
5033
5028
  target: "_blank",
5034
- tabIndex: isMobile ? 1 : 0
5029
+ tabIndex: isMobile ? 1 : undefined
5035
5030
  }, /*#__PURE__*/React__default.createElement(Icon, {
5036
5031
  iconName: mediaLink.name,
5037
5032
  color: "white",
@@ -5300,7 +5295,6 @@ var Dropdown = function Dropdown(_ref) {
5300
5295
  className = _ref.className,
5301
5296
  role = _ref.role,
5302
5297
  ariaLabel = _ref.ariaLabel,
5303
- tabLinkId = _ref.tabLinkId,
5304
5298
  trimTabText = _ref.trimTabText;
5305
5299
  var node = React.useRef();
5306
5300
  var _useState = React.useState(false),
@@ -5397,7 +5391,6 @@ var Dropdown = function Dropdown(_ref) {
5397
5391
  };
5398
5392
  var renderTab = function renderTab() {
5399
5393
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
5400
- tabLinkId: tabLinkId,
5401
5394
  trimText: trimTabText,
5402
5395
  title: title,
5403
5396
  titleLink: titleLink,
@@ -5477,8 +5470,7 @@ var Account = function Account(_ref) {
5477
5470
  iconName: iconName,
5478
5471
  withOptionsInMobile: false,
5479
5472
  withIcon: "left",
5480
- className: className,
5481
- tabLinkId: "account-link"
5473
+ className: className
5482
5474
  });
5483
5475
  };
5484
5476
 
@@ -5985,7 +5977,7 @@ var PolicyLinks = function PolicyLinks(_ref) {
5985
5977
  href: link.href,
5986
5978
  "data-roh": link.dataRoh,
5987
5979
  "aria-label": link.title,
5988
- tabIndex: isMobile ? 4 : 0
5980
+ tabIndex: isMobile ? 4 : undefined
5989
5981
  }, link.title);
5990
5982
  }));
5991
5983
  };
@@ -6020,7 +6012,7 @@ var Footer = function Footer(_ref) {
6020
6012
  }), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
6021
6013
  href: contact.href,
6022
6014
  "aria-label": contact.title,
6023
- tabIndex: isMobile ? 2 : 0
6015
+ tabIndex: isMobile ? 2 : undefined
6024
6016
  }, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6025
6017
  size: "large",
6026
6018
  color: "white"
@@ -6028,7 +6020,7 @@ var Footer = function Footer(_ref) {
6028
6020
  href: newsletter.link.href,
6029
6021
  "data-roh": newsletter.link.dataRoh,
6030
6022
  "aria-label": newsletter.link.title,
6031
- tabIndex: isMobile ? 3 : 0
6023
+ tabIndex: isMobile ? 3 : undefined
6032
6024
  }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement(SponsorLogoContainer, {
6033
6025
  "data-testid": "arts-logo"
6034
6026
  }, /*#__PURE__*/React__default.createElement(SponsorLogo, Object.assign({
@@ -9824,58 +9816,10 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9824
9816
  })))))))))));
9825
9817
  };
9826
9818
 
9827
- var _templateObject$15, _templateObject2$Q, _templateObject3$E, _templateObject4$y;
9828
- var GRID = {
9829
- desktop: {
9830
- leftWithImage: '1 / 1 / 3 / 7',
9831
- leftNoImage: '1 / 1 / 3 / 12',
9832
- right: '1 / 7 / 3 / 17'
9833
- },
9834
- mobile: {
9835
- leftWithImage: '3 / 1 / 4 / 15',
9836
- leftNoImage: '1 / 1 / 3 / 15',
9837
- right: '2 / 1 / 3 / 15'
9838
- }
9839
- };
9840
- var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
9841
- var $background = _ref.$background;
9842
- return "var(--color-" + $background + ")";
9843
- });
9844
- var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
9845
- var hasImage = _ref2.hasImage;
9846
- return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
9847
- }, devices.mobileAndTablet, function (_ref3) {
9848
- var hasImage = _ref3.hasImage;
9849
- return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
9850
- });
9851
- var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
9852
- var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
9853
-
9854
- var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
9855
- var _image$src, _image$alt;
9856
- var image = _ref.image,
9857
- children = _ref.children,
9858
- _ref$background = _ref.background,
9859
- background = _ref$background === void 0 ? 'base-black' : _ref$background,
9860
- className = _ref.className;
9861
- return /*#__PURE__*/React__default.createElement(HighlightPanelGrid, {
9862
- className: className,
9863
- "$background": background,
9864
- "data-testid": "highlight-heading-wrapper"
9865
- }, /*#__PURE__*/React__default.createElement(LeftPanel$1, {
9866
- hasImage: !!image
9867
- }, /*#__PURE__*/React__default.createElement(Wrapper$6, null, children)), image && (/*#__PURE__*/React__default.createElement(RightPanel$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
9868
- aspectRatio: exports.AspectRatio['4:3']
9869
- }, /*#__PURE__*/React__default.createElement("img", {
9870
- src: (_image$src = image == null ? void 0 : image.src) != null ? _image$src : '',
9871
- alt: (_image$alt = image == null ? void 0 : image.alt) != null ? _image$alt : ''
9872
- })))));
9873
- };
9874
-
9875
- var _templateObject$16, _templateObject2$R, _templateObject3$F, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$8, _templateObject0$7;
9876
- var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
9877
- var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__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"])));
9878
- var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
9819
+ var _templateObject$15, _templateObject2$Q, _templateObject3$E, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$8, _templateObject0$7;
9820
+ var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
9821
+ var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__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"])));
9822
+ var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
9879
9823
  var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__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);
9880
9824
  var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
9881
9825
  var invert = _ref.invert,
@@ -10126,10 +10070,10 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
10126
10070
  }), linkText))))));
10127
10071
  };
10128
10072
 
10129
- var _templateObject$17, _templateObject2$S, _templateObject3$G, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$d;
10130
- var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
10131
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
10132
- var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
10073
+ var _templateObject$16, _templateObject2$R, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$d;
10074
+ var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
10075
+ var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
10076
+ var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
10133
10077
  var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
10134
10078
  var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
10135
10079
  var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
@@ -10158,16 +10102,14 @@ var NavButtonOrLink = function NavButtonOrLink(_ref) {
10158
10102
  return onPageChange(page);
10159
10103
  },
10160
10104
  key: keyProp,
10161
- "data-testid": testId,
10162
- tabIndex: 0
10105
+ "data-testid": testId
10163
10106
  }, children);
10164
10107
  }
10165
10108
  return /*#__PURE__*/React__default.createElement(PageNav, {
10166
10109
  "aria-label": ariaLabel,
10167
10110
  href: "" + (baseUrl != null ? baseUrl : '') + page,
10168
10111
  key: keyProp,
10169
- "data-testid": testId,
10170
- tabIndex: 0
10112
+ "data-testid": testId
10171
10113
  }, children);
10172
10114
  };
10173
10115
 
@@ -10188,16 +10130,14 @@ var PageLinkOrButton = function PageLinkOrButton(_ref) {
10188
10130
  return onPageChange(page);
10189
10131
  },
10190
10132
  key: keyProp,
10191
- "data-testid": testId,
10192
- tabIndex: 0
10133
+ "data-testid": testId
10193
10134
  }, children);
10194
10135
  }
10195
10136
  return /*#__PURE__*/React__default.createElement(PaginationLink, {
10196
10137
  "aria-label": ariaLabel,
10197
10138
  href: "" + (baseUrl != null ? baseUrl : '') + page,
10198
10139
  key: keyProp,
10199
- "data-testid": testId,
10200
- tabIndex: 0
10140
+ "data-testid": testId
10201
10141
  }, children);
10202
10142
  };
10203
10143
 
@@ -10285,14 +10225,14 @@ var Pagination = function Pagination(_ref) {
10285
10225
  }))))));
10286
10226
  };
10287
10227
 
10288
- var _templateObject$18, _templateObject2$T, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i;
10289
- var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\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);
10290
- var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
10291
- var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
10292
- var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
10293
- var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
10294
- var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
10295
- var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
10228
+ var _templateObject$17, _templateObject2$S, _templateObject3$G, _templateObject4$y, _templateObject5$t, _templateObject6$m, _templateObject7$i;
10229
+ var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$17 || (_templateObject$17 = /*#__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);
10230
+ var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
10231
+ var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
10232
+ var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
10233
+ var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
10234
+ var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
10235
+ var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
10296
10236
 
10297
10237
  var Person = function Person(_ref) {
10298
10238
  var person = _ref.person,
@@ -10308,7 +10248,10 @@ var Person = function Person(_ref) {
10308
10248
  href: link
10309
10249
  }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null);
10310
10250
  }
10311
- return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementContent, null, replacement))), personSeparator);
10251
+ return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
10252
+ level: 1,
10253
+ tag: "span"
10254
+ }, replacement)))), personSeparator);
10312
10255
  };
10313
10256
 
10314
10257
  /* eslint-disable no-extra-boolean-cast */
@@ -10316,10 +10259,13 @@ function hasHeadshot(role) {
10316
10259
  return +(!!role.people[0].headshot && role.people[0].useHeadshot);
10317
10260
  }
10318
10261
  function textSection(role) {
10319
- return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleContent, {
10262
+ return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
10320
10263
  title: "role",
10321
10264
  "data-roh": role.dataROH
10322
- }, role.name), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
10265
+ }, /*#__PURE__*/React__default.createElement(Overline, {
10266
+ level: 1
10267
+ }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
10268
+ level: 1,
10323
10269
  tag: "p"
10324
10270
  }, role.people.map(function (person, personIndex) {
10325
10271
  return /*#__PURE__*/React__default.createElement(Person, {
@@ -10330,11 +10276,8 @@ function textSection(role) {
10330
10276
  })));
10331
10277
  }
10332
10278
  var PeopleListing = function PeopleListing(_ref) {
10333
- var roles = _ref.roles,
10334
- className = _ref.className;
10335
- return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
10336
- className: className
10337
- }, roles.sort(function (a, b) {
10279
+ var roles = _ref.roles;
10280
+ return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
10338
10281
  return hasHeadshot(b) - hasHeadshot(a);
10339
10282
  }).map(function (role, index) {
10340
10283
  return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -10346,14 +10289,14 @@ var PeopleListing = function PeopleListing(_ref) {
10346
10289
  }));
10347
10290
  };
10348
10291
 
10349
- var _templateObject$19, _templateObject2$U, _templateObject3$I, _templateObject4$A;
10350
- var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
10351
- var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
10292
+ var _templateObject$18, _templateObject2$T, _templateObject3$H, _templateObject4$z;
10293
+ var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
10294
+ var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
10352
10295
  var columnCount = _ref.columnCount;
10353
10296
  return "repeat(" + columnCount + ", 1fr)";
10354
10297
  }, devices.mobile, devices.tablet);
10355
- var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
10356
- var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
10298
+ var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
10299
+ var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
10357
10300
 
10358
10301
  // Get the total character length of a property in an array of objects
10359
10302
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -10442,7 +10385,7 @@ var CreditListing = function CreditListing(_ref) {
10442
10385
  columnSpanSmallDevice: 1,
10443
10386
  key: "credit-entry-" + name + "-" + index,
10444
10387
  "data-testid": "credit-entry"
10445
- }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
10388
+ }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
10446
10389
  title: "role",
10447
10390
  "data-roh": dataROH
10448
10391
  }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -10463,7 +10406,7 @@ var CreditListing = function CreditListing(_ref) {
10463
10406
  withSeparator: personArray.length !== personIndex + 1
10464
10407
  });
10465
10408
  }));
10466
- }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
10409
+ }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyText, {
10467
10410
  level: 1,
10468
10411
  tag: "p"
10469
10412
  }, replacement))), musicTitle && musicTitle.length > 0 && (/*#__PURE__*/React__default.createElement(BodyText, {
@@ -10480,14 +10423,14 @@ var CreditListing = function CreditListing(_ref) {
10480
10423
  }, creditEntries);
10481
10424
  };
10482
10425
 
10483
- var _templateObject$1a, _templateObject3$J, _templateObject4$B, _templateObject5$u, _templateObject6$n, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16;
10426
+ var _templateObject$19, _templateObject3$I, _templateObject4$A, _templateObject5$u, _templateObject6$n, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16;
10484
10427
  var LENGTH_TEXT = 28;
10485
10428
  var LENGTH_TEXT_TABLET$1 = 12;
10486
10429
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
10487
10430
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
10488
10431
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
10489
10432
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
10490
- var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1a || (_templateObject$1a = /*#__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) {
10433
+ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$19 || (_templateObject$19 = /*#__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) {
10491
10434
  var imageToLeft = _ref.imageToLeft;
10492
10435
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
10493
10436
  }, devices.tablet, function (_ref2) {
@@ -10497,7 +10440,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1a ||
10497
10440
  var asCard = _ref3.asCard;
10498
10441
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
10499
10442
  });
10500
- var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
10443
+ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
10501
10444
  var hasTextLinks = _ref4.hasTextLinks;
10502
10445
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
10503
10446
  }, function (_ref5) {
@@ -10521,7 +10464,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$J ||
10521
10464
  }
10522
10465
  return '';
10523
10466
  });
10524
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
10467
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
10525
10468
  var marginBottom = _ref7.marginBottom;
10526
10469
  return marginBottom + "px";
10527
10470
  }, function (_ref8) {
@@ -10735,25 +10678,25 @@ var PromoWithTags = function PromoWithTags(_ref) {
10735
10678
  }))));
10736
10679
  };
10737
10680
 
10738
- var _templateObject$1b, _templateObject2$V, _templateObject3$K, _templateObject4$C, _templateObject5$v, _templateObject6$o, _templateObject7$k;
10681
+ var _templateObject$1a, _templateObject2$U, _templateObject3$J, _templateObject4$B, _templateObject5$v, _templateObject6$o, _templateObject7$k;
10739
10682
  var LENGTH_TEXT$2 = 28;
10740
10683
  var LENGTH_TEXT_TABLET$2 = 10;
10741
- var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1b || (_templateObject$1b = /*#__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) {
10684
+ var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$1a || (_templateObject$1a = /*#__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) {
10742
10685
  var imageToLeft = _ref.imageToLeft;
10743
10686
  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'";
10744
10687
  }, devices.tablet, function (_ref2) {
10745
10688
  var imageToLeft = _ref2.imageToLeft;
10746
10689
  return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
10747
10690
  }, devices.mobile);
10748
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
10691
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
10749
10692
  var imageToLeft = _ref3.imageToLeft;
10750
10693
  return imageToLeft ? 'left' : 'right';
10751
10694
  }, devices.mobile);
10752
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
10695
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
10753
10696
  var imageToLeft = _ref4.imageToLeft;
10754
10697
  return imageToLeft ? 'right' : 'left';
10755
10698
  }, devices.mobile);
10756
- var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10699
+ var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10757
10700
  var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10758
10701
  var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10759
10702
  var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
@@ -10866,8 +10809,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10866
10809
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10867
10810
  };
10868
10811
 
10869
- var _templateObject$1c;
10870
- var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
10812
+ var _templateObject$1b;
10813
+ var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
10871
10814
 
10872
10815
  /**
10873
10816
  * DEPRECATED. Use RadioGroup2 instead
@@ -10922,9 +10865,9 @@ var RadioGroup = function RadioGroup(_ref) {
10922
10865
  })));
10923
10866
  };
10924
10867
 
10925
- var _templateObject$1d, _templateObject2$W, _templateObject3$L;
10926
- var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10927
- var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
10868
+ var _templateObject$1c, _templateObject2$V, _templateObject3$K;
10869
+ var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10870
+ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
10928
10871
  var horizontalMode = _ref.horizontalMode;
10929
10872
  if (horizontalMode) return 'row';
10930
10873
  return 'column';
@@ -10932,7 +10875,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_temp
10932
10875
  var gap = _ref2.gap;
10933
10876
  return gap + "px";
10934
10877
  });
10935
- var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
10878
+ var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
10936
10879
  var darkMode = _ref3.darkMode;
10937
10880
  if (darkMode) return 'var(--base-color-white)';
10938
10881
  return 'var(--base-color-errorstate)';
@@ -11009,10 +10952,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
11009
10952
  }, error))));
11010
10953
  };
11011
10954
 
11012
- var _templateObject$1e, _templateObject2$X, _templateObject3$M;
11013
- var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\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);
11014
- var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__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"])));
11015
- var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__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);
10955
+ var _templateObject$1d, _templateObject2$W, _templateObject3$L;
10956
+ var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\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);
10957
+ var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__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"])));
10958
+ var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__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);
11016
10959
 
11017
10960
  /* eslint-disable react/no-danger */
11018
10961
  var StatusBanner = function StatusBanner(_ref) {
@@ -11068,8 +11011,8 @@ var StatusBanner = function StatusBanner(_ref) {
11068
11011
  return null;
11069
11012
  };
11070
11013
 
11071
- var _templateObject$1f;
11072
- var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__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 margin-block-start: 0;\n }\n"])), devices.mobile);
11014
+ var _templateObject$1e;
11015
+ var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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 margin-block-start: 0;\n }\n"])), devices.mobile);
11073
11016
 
11074
11017
  /* ~~~~~~~ new harmonic types ~~~~~~~ */
11075
11018
  var HarmonicSize = {
@@ -11111,8 +11054,8 @@ var SectionTitle = function SectionTitle(_ref) {
11111
11054
  }, description)))));
11112
11055
  };
11113
11056
 
11114
- var _templateObject$1g, _templateObject2$Y, _templateObject3$N, _templateObject4$D, _templateObject5$w, _templateObject6$p, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
11115
- var stateStyles = /*#__PURE__*/styled.css(_templateObject$1g || (_templateObject$1g = /*#__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) {
11057
+ var _templateObject$1f, _templateObject2$X, _templateObject3$M, _templateObject4$C, _templateObject5$w, _templateObject6$p, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
11058
+ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1f || (_templateObject$1f = /*#__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) {
11116
11059
  var theme = _ref.theme;
11117
11060
  return "3px solid " + theme.colors.lapisLazuli;
11118
11061
  }, function (_ref2) {
@@ -11122,12 +11065,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1g || (_templateObject
11122
11065
  var theme = _ref3.theme;
11123
11066
  return theme.colors.lightgrey;
11124
11067
  });
11125
- var borderStyles = /*#__PURE__*/styled.css(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
11068
+ var borderStyles = /*#__PURE__*/styled.css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
11126
11069
  var theme = _ref4.theme;
11127
11070
  return theme.colors.darkgrey;
11128
11071
  });
11129
- var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
11130
- var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
11072
+ var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
11073
+ var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
11131
11074
  var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
11132
11075
  var theme = _ref5.theme;
11133
11076
  return {
@@ -11136,7 +11079,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
11136
11079
  title: 'Select Arrow'
11137
11080
  };
11138
11081
  })(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
11139
- var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
11082
+ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
11140
11083
  var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
11141
11084
  var Options = /*#__PURE__*/styled__default.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
11142
11085
  var Option = /*#__PURE__*/styled__default.li(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
@@ -11445,7 +11388,7 @@ function Select(_ref3) {
11445
11388
  }
11446
11389
  setSelectedValue(options[0]);
11447
11390
  }, [options, resetWhenOptionsUpdate]);
11448
- return /*#__PURE__*/React__default.createElement(Wrapper$7, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
11391
+ return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
11449
11392
  level: 1,
11450
11393
  tag: "p",
11451
11394
  "data-testid": "select-label"
@@ -11492,9 +11435,9 @@ function Select(_ref3) {
11492
11435
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
11493
11436
  }
11494
11437
 
11495
- var _templateObject$1h, _templateObject2$Z, _templateObject3$O, _templateObject4$E;
11496
- var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
11497
- var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-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 .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
11438
+ var _templateObject$1g, _templateObject2$Y, _templateObject3$N, _templateObject4$D;
11439
+ var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
11440
+ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-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 .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
11498
11441
  var width = _ref.width;
11499
11442
  if (!width) return 'none';
11500
11443
  return width + "px";
@@ -11511,12 +11454,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_t
11511
11454
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
11512
11455
  return "0 0 0 3px var(--base-color-lapislazuli)";
11513
11456
  });
11514
- var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
11457
+ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
11515
11458
  var darkMode = _ref5.darkMode;
11516
11459
  if (darkMode) return "var(--base-color-white)";
11517
11460
  return "var(--base-color-black)";
11518
11461
  });
11519
- var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11462
+ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
11520
11463
  var darkMode = _ref6.darkMode;
11521
11464
  if (darkMode) return "var(--base-color-white)";
11522
11465
  return "var(--base-color-errorstate)";
@@ -11630,8 +11573,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
11630
11573
  })));
11631
11574
  };
11632
11575
 
11633
- var _templateObject$1i, _templateObject2$_;
11634
- var Wrapper$8 = /*#__PURE__*/styled__default.figure(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n margin: 0;\n\n ", " {\n height: calc(100% - 34px);\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n\n @media ", " {\n height: calc(100% - 30px);\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
11576
+ var _templateObject$1h, _templateObject2$Z;
11577
+ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n margin: 0;\n\n ", " {\n height: calc(100% - 34px);\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n\n @media ", " {\n height: calc(100% - 30px);\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
11635
11578
  var _ref$aspectRatio = _ref.aspectRatio,
11636
11579
  aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
11637
11580
  return aspectRatio;
@@ -11650,7 +11593,7 @@ var Wrapper$8 = /*#__PURE__*/styled__default.figure(_templateObject$1i || (_temp
11650
11593
  height = _ref4.height;
11651
11594
  return "calc(calc(" + height + "px - 30px) * " + AspectRatioWidth[aspectRatio] + ")";
11652
11595
  });
11653
- var CaptionWrapper = /*#__PURE__*/styled__default(Caption)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-top: 12px;\n max-width: var(--caption-max-width, 100%);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: normal;\n }\n height: 22px;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n word-break: var(--word-break-body);\n\n @media ", " {\n height: 18px;\n }\n"])), devices.mobile);
11596
+ var CaptionWrapper = /*#__PURE__*/styled__default(Caption)(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-top: 12px;\n max-width: var(--caption-max-width, 100%);\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: normal;\n }\n height: 22px;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n word-break: var(--word-break-body);\n\n @media ", " {\n height: 18px;\n }\n"])), devices.mobile);
11654
11597
 
11655
11598
  var ImageWithCaption = function ImageWithCaption(_ref) {
11656
11599
  var caption = _ref.caption,
@@ -11719,7 +11662,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
11719
11662
  };
11720
11663
  return /*#__PURE__*/React__default.cloneElement(childElement, newProps);
11721
11664
  });
11722
- return /*#__PURE__*/React__default.createElement(Wrapper$8, {
11665
+ return /*#__PURE__*/React__default.createElement(Wrapper$7, {
11723
11666
  aspectRatio: aspectRatio,
11724
11667
  ref: wrapperRef,
11725
11668
  height: height
@@ -11730,11 +11673,11 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
11730
11673
  }, caption));
11731
11674
  };
11732
11675
 
11733
- var _templateObject$1j, _templateObject2$$, _templateObject3$P, _templateObject4$F, _templateObject5$x, _templateObject6$q;
11734
- var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__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"])));
11735
- var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11736
- var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11737
- var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11676
+ var _templateObject$1i, _templateObject2$_, _templateObject3$O, _templateObject4$E, _templateObject5$x, _templateObject6$q;
11677
+ var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__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"])));
11678
+ var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11679
+ var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11680
+ var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11738
11681
  var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
11739
11682
  var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
11740
11683
 
@@ -11774,14 +11717,14 @@ var MiniCard = function MiniCard(_ref) {
11774
11717
  }, title)))));
11775
11718
  };
11776
11719
 
11777
- var _templateObject$1k, _templateObject2$10, _templateObject3$Q, _templateObject4$G, _templateObject5$y;
11778
- var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__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"])));
11779
- var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
11780
- var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11720
+ var _templateObject$1j, _templateObject2$$, _templateObject3$P, _templateObject4$F, _templateObject5$y;
11721
+ var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__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"])));
11722
+ var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
11723
+ var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11781
11724
  var isVisible = _ref.isVisible;
11782
11725
  return isVisible ? 'visible' : 'hidden';
11783
11726
  });
11784
- var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11727
+ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11785
11728
  var isVisible = _ref2.isVisible;
11786
11729
  return isVisible ? 'visible' : 'hidden';
11787
11730
  });
@@ -11866,11 +11809,11 @@ var ReadMore = function ReadMore(_ref) {
11866
11809
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11867
11810
  };
11868
11811
 
11869
- var _templateObject$1l, _templateObject2$11, _templateObject3$R, _templateObject4$H, _templateObject5$z;
11870
- var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11871
- var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
11872
- var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
11873
- var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
11812
+ var _templateObject$1k, _templateObject2$10, _templateObject3$Q, _templateObject4$G, _templateObject5$z;
11813
+ var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11814
+ var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n }\n"])), exports.Colors.LightGrey);
11815
+ var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
11816
+ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), exports.Colors.Black, function (_ref) {
11874
11817
  var isActive = _ref.isActive;
11875
11818
  return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
11876
11819
  }, exports.Colors.MidGrey);
@@ -12030,14 +11973,14 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
12030
11973
  });
12031
11974
  };
12032
11975
 
12033
- var _templateObject$1m, _templateObject2$12, _templateObject3$S, _templateObject4$I, _templateObject5$A, _templateObject6$r;
12034
- var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
12035
- var Sections = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
12036
- var Section = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11976
+ var _templateObject$1l, _templateObject2$11, _templateObject3$R, _templateObject4$H, _templateObject5$A, _templateObject6$r;
11977
+ var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11978
+ var Sections = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11979
+ var Section = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
12037
11980
  var color = _ref.color;
12038
11981
  return "var(--base-color-" + color + ")";
12039
11982
  });
12040
- var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
11983
+ var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
12041
11984
  var Text = /*#__PURE__*/styled__default.div(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
12042
11985
  var color = _ref2.color;
12043
11986
  return "var(--base-color-" + color + ")";
@@ -12124,11 +12067,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
12124
12067
  }, strengthLabel))));
12125
12068
  };
12126
12069
 
12127
- var _templateObject$1n, _templateObject2$13, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$s, _templateObject7$m, _templateObject8$g;
12128
- var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
12129
- var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
12130
- var Wrapper$9 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
12131
- var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
12070
+ var _templateObject$1m, _templateObject2$12, _templateObject3$S, _templateObject4$I, _templateObject5$B, _templateObject6$s, _templateObject7$m, _templateObject8$g;
12071
+ var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
12072
+ var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
12073
+ var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
12074
+ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
12132
12075
  return "calc(100% / " + (props.columns - 1) + ")";
12133
12076
  }, devices.tablet, devices.mobile);
12134
12077
  var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n min-width: 150px;\n }\n"])), function (props) {
@@ -12309,7 +12252,7 @@ var Table = function Table(_ref) {
12309
12252
  } else {
12310
12253
  visibleRows = totalRows;
12311
12254
  }
12312
- return /*#__PURE__*/React__default.createElement(Wrapper$9, {
12255
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
12313
12256
  className: className
12314
12257
  }, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12315
12258
  onClickPrev: handlePrev,
@@ -12339,17 +12282,17 @@ var Table = function Table(_ref) {
12339
12282
  }))));
12340
12283
  };
12341
12284
 
12342
- var _templateObject$1o, _templateObject2$14, _templateObject3$U, _templateObject4$K, _templateObject5$C, _templateObject6$t, _templateObject7$n, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
12343
- var Wrapper$a = /*#__PURE__*/styled__default('div')(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
12285
+ var _templateObject$1n, _templateObject2$13, _templateObject3$T, _templateObject4$J, _templateObject5$C, _templateObject6$t, _templateObject7$n, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
12286
+ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
12344
12287
  var theme = _ref.theme;
12345
12288
  return "var(--color-" + theme + ")";
12346
12289
  }, function (_ref2) {
12347
12290
  var theme = _ref2.theme;
12348
12291
  return "var(--color-" + theme + ")";
12349
12292
  });
12350
- var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
12351
- var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
12352
- var Error = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
12293
+ var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
12294
+ var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
12295
+ var Error = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
12353
12296
  var Form = /*#__PURE__*/styled__default.form(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error);
12354
12297
  var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
12355
12298
  var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
@@ -12640,8 +12583,7 @@ var SignUpForm = function SignUpForm(_ref) {
12640
12583
  role: "alert",
12641
12584
  "aria-live": "assertive"
12642
12585
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, null, errors.serverError)))), !isLoggedIn && isMobile ? (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12643
- href: ctaPrivacy.link,
12644
- tabIndex: 0
12586
+ href: ctaPrivacy.link
12645
12587
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12646
12588
  size: "small"
12647
12589
  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, null, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
@@ -12651,8 +12593,7 @@ var SignUpForm = function SignUpForm(_ref) {
12651
12593
  onClick: handleFormSubmit,
12652
12594
  theme: theme
12653
12595
  })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12654
- href: ctaPrivacy.link,
12655
- tabIndex: 0
12596
+ href: ctaPrivacy.link
12656
12597
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12657
12598
  size: "medium"
12658
12599
  }, ctaPrivacy.text))))));
@@ -12699,7 +12640,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12699
12640
  React.useEffect(function () {
12700
12641
  setDropdownOpen(isOpened);
12701
12642
  }, [isOpened]);
12702
- return /*#__PURE__*/React__default.createElement(Wrapper$a, {
12643
+ return /*#__PURE__*/React__default.createElement(Wrapper$9, {
12703
12644
  theme: themeToColor(theme),
12704
12645
  className: className
12705
12646
  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
@@ -12764,12 +12705,12 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12764
12705
  }))))));
12765
12706
  };
12766
12707
 
12767
- var _templateObject$1p, _templateObject2$15, _templateObject4$L, _templateObject5$D;
12768
- var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
12708
+ var _templateObject$1o, _templateObject2$14, _templateObject4$K, _templateObject5$D;
12709
+ var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
12769
12710
  var withShadow = _ref.withShadow;
12770
- return withShadow && styled.css(_templateObject2$15 || (_templateObject2$15 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
12711
+ return withShadow && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
12771
12712
  }, devices.mobile);
12772
- var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
12713
+ var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
12773
12714
  var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
12774
12715
 
12775
12716
  var AnchorBar = function AnchorBar(_ref) {
@@ -12811,13 +12752,11 @@ var AnchorBar = function AnchorBar(_ref) {
12811
12752
  columnSpanDevice: 12
12812
12753
  }, /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, /*#__PURE__*/React__default.createElement(TextLink, {
12813
12754
  href: (_cta$href = cta.href) != null ? _cta$href : '#',
12814
- onClick: onCtaClickHandler,
12815
- tabIndex: 0
12755
+ onClick: onCtaClickHandler
12816
12756
  }, cta.text), /*#__PURE__*/React__default.createElement(CloseButtonWrapper, {
12817
12757
  href: "#",
12818
12758
  onClick: onCloseButtonHandler,
12819
- "aria-label": "Close an anchor bar",
12820
- tabIndex: 0
12759
+ "aria-label": "Close an anchor bar"
12821
12760
  }, /*#__PURE__*/React__default.createElement(Icon, {
12822
12761
  iconName: "Close"
12823
12762
  })))));
@@ -12825,8 +12764,8 @@ var AnchorBar = function AnchorBar(_ref) {
12825
12764
  return null;
12826
12765
  };
12827
12766
 
12828
- var _templateObject$1q;
12829
- var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1q || (_templateObject$1q = /*#__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 --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\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 --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
12767
+ var _templateObject$1p;
12768
+ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__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 --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\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 --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
12830
12769
  var theme = _ref.theme;
12831
12770
  return theme.colors.primary;
12832
12771
  }, function (_ref2) {
@@ -13773,10 +13712,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1q || (
13773
13712
  return theme.footer.tablet.paddingBottom;
13774
13713
  }, devices.desktop, devices.largeDesktop);
13775
13714
 
13776
- var _templateObject$1r, _templateObject2$16, _templateObject3$V;
13777
- var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
13778
- var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
13779
- var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
13715
+ var _templateObject$1q, _templateObject2$15, _templateObject3$U;
13716
+ var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
13717
+ var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
13718
+ var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
13780
13719
 
13781
13720
  /* eslint-disable react/no-danger */
13782
13721
  var Quote = function Quote(_ref) {
@@ -13855,7 +13794,6 @@ exports.NavigationText = NavigationText;
13855
13794
  exports.Overline = Overline;
13856
13795
  exports.PageHeading = PageHeading;
13857
13796
  exports.PageHeadingCompact = PageHeadingCompact;
13858
- exports.PageHeadingHighlight = PageHeadingHighlight;
13859
13797
  exports.PageHeadingImpact = PageHeadingImpact;
13860
13798
  exports.PageHeadingPanel = PageHeadingPanel;
13861
13799
  exports.PageHeadingPromo = PageHeadingPromo;