@royaloperahouse/harmonic 0.12.0-b → 0.12.0-c

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 (19) hide show
  1. package/dist/components/Typography/Typography.d.ts +2 -2
  2. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  3. package/dist/components/molecules/Accordion/Accordion.style.d.ts +5 -3
  4. package/dist/components/molecules/Card/Card.style.d.ts +1 -1
  5. package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
  6. package/dist/components/molecules/Editorial/Editorial.style.d.ts +2 -2
  7. package/dist/components/molecules/Information/Information.style.d.ts +1 -1
  8. package/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
  9. package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +2 -2
  10. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +2 -2
  11. package/dist/harmonic.cjs.development.js +86 -99
  12. package/dist/harmonic.cjs.development.js.map +1 -1
  13. package/dist/harmonic.cjs.production.min.js +1 -1
  14. package/dist/harmonic.cjs.production.min.js.map +1 -1
  15. package/dist/harmonic.esm.js +86 -99
  16. package/dist/harmonic.esm.js.map +1 -1
  17. package/dist/types/editorial.d.ts +6 -12
  18. package/dist/types/types.d.ts +9 -32
  19. package/package.json +1 -1
package/dist/harmonic.esm.js CHANGED
@@ -251,21 +251,24 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
251
251
  /* ~~~ Subtitle - (use case) ~~~ */
252
252
  var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
253
253
  var children = _ref3.children,
254
- size = _ref3.size,
254
+ _ref3$size = _ref3.size,
255
+ size = _ref3$size === void 0 ? 'large' : _ref3$size,
255
256
  _ref3$color = _ref3.color,
256
257
  color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
257
- className = _ref3.className;
258
+ className = _ref3.className,
259
+ _ref3$tag = _ref3.tag,
260
+ Tag = _ref3$tag === void 0 ? 'p' : _ref3$tag;
258
261
  var classNames = createClassNames('subtitle', {
259
262
  size: size,
260
263
  color: color,
261
264
  className: className
262
265
  }, typographyStyles);
263
- return /*#__PURE__*/React__default.createElement("p", {
266
+ return /*#__PURE__*/React__default.createElement(Tag, {
264
267
  className: classNames
265
268
  }, children);
266
269
  };
267
270
  /* ~~~ Body Copy Text - (use case) ~~~ */
268
- var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
271
+ var BodyCopyHarmonic = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
269
272
  var children = _ref4.children,
270
273
  _ref4$size = _ref4.size,
271
274
  size = _ref4$size === void 0 ? 'medium' : _ref4$size,
@@ -283,9 +286,11 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
283
286
  className: className
284
287
  }, typographyStyles);
285
288
  return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
286
- className: classNames
289
+ className: classNames,
290
+ ref: ref
287
291
  }, props), children);
288
- };
292
+ });
293
+ BodyCopyHarmonic.displayName = 'BodyCopyHarmonic';
289
294
  /* ~~~ Overline - (use case) ~~~ */
290
295
  var HarmonicOverline = function HarmonicOverline(_ref5) {
291
296
  var children = _ref5.children,
@@ -8149,19 +8154,30 @@ var InfoSection = function InfoSection(_ref) {
8149
8154
  }, additionalInfo)))));
8150
8155
  };
8151
8156
 
8152
- var _templateObject$R, _templateObject2$D, _templateObject3$r, _templateObject4$n, _templateObject5$h, _templateObject6$d;
8153
- var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
8154
- var LineContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
8155
- var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
8156
- var isVisible = _ref.isVisible;
8157
- return isVisible ? 'visible' : 'hidden';
8157
+ var _templateObject$R, _templateObject2$D, _templateObject3$r, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$a;
8158
+ var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n border-top: 2px solid var(--color-base-light-grey);\n border-bottom: ", ";\n"])), function (_ref) {
8159
+ var showLine = _ref.showLine;
8160
+ return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
8161
+ });
8162
+ var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n opacity: ", ";\n transition: opacity 0.2s ease;\n pointer-events: ", ";\n\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref2) {
8163
+ var isVisible = _ref2.isVisible;
8164
+ return isVisible ? 1 : 0;
8165
+ }, function (_ref3) {
8166
+ var isVisible = _ref3.isVisible;
8167
+ return isVisible ? 'auto' : 'none';
8158
8168
  }, devices.mobile);
8159
- var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
8160
- var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref2) {
8161
- var textHeight = _ref2.textHeight;
8169
+ var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding-top: 28px;\n padding-bottom: 28px;\n color: var(--color-primary-black);\n\n && svg {\n width: 24px;\n height: 24px;\n }\n\n :hover {\n cursor: pointer;\n }\n"])));
8170
+ var TitleText$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: calc(100% - 32px);\n"])));
8171
+ var ExtendedBodyCopyHarmonic = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
8172
+ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig({
8173
+ shouldForwardProp: function shouldForwardProp(prop) {
8174
+ return prop !== 'textHeight';
8175
+ }
8176
+ })(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref4) {
8177
+ var textHeight = _ref4.textHeight;
8162
8178
  return textHeight;
8163
8179
  }, devices.mobile);
8164
- var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
8180
+ var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
8165
8181
 
8166
8182
  /* eslint-disable react/no-unstable-nested-components */
8167
8183
  var Accordion = function Accordion(_ref) {
@@ -8170,15 +8186,9 @@ var Accordion = function Accordion(_ref) {
8170
8186
  _ref$showLine = _ref.showLine,
8171
8187
  showLine = _ref$showLine === void 0 ? true : _ref$showLine,
8172
8188
  children = _ref.children,
8173
- visibleStandfirst = _ref.visibleStandfirst,
8174
8189
  _ref$initOpen = _ref.initOpen,
8175
8190
  initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
8176
- _ref$contentType = _ref.contentType,
8177
- contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
8178
- _ref$semanticLevel = _ref.semanticLevel,
8179
- semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
8180
- _ref$displayLevel = _ref.displayLevel,
8181
- displayLevel = _ref$displayLevel === void 0 ? 1 : _ref$displayLevel;
8191
+ className = _ref.className;
8182
8192
  var _useState = useState(initOpen),
8183
8193
  openAccordion = _useState[0],
8184
8194
  setOpenAccordion = _useState[1];
@@ -8210,60 +8220,31 @@ var Accordion = function Accordion(_ref) {
8210
8220
  toggleAccordion();
8211
8221
  }
8212
8222
  };
8213
- var Standfirst = function Standfirst() {
8214
- return visibleStandfirst ? (/*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
8215
- isVisible: childrenVisibility
8216
- }, visibleStandfirst))) : null;
8217
- };
8218
8223
  var contentContainerId = title + "-accordion-content";
8219
- var AccordionTitle = function AccordionTitle(_ref2) {
8220
- var level = _ref2.level,
8221
- localSemanticLevel = _ref2.semanticLevel;
8222
- var subtitleLevel = level;
8223
- if (contentType === 'header') {
8224
- return /*#__PURE__*/React__default.createElement(Header, {
8225
- semanticLevel: localSemanticLevel,
8226
- level: level
8227
- }, title);
8228
- }
8229
- if (contentType === 'subtitle') {
8230
- if (contentType === 'subtitle') {
8231
- if (![1, 2].includes(level)) {
8232
- console.warn('Invalid Subtitle level:', level);
8233
- subtitleLevel = level > 2 ? 2 : level;
8234
- }
8235
- }
8236
- return /*#__PURE__*/React__default.createElement(Subtitle, Object.assign({}, {
8237
- level: subtitleLevel,
8238
- semanticLevel: localSemanticLevel
8239
- }), title);
8240
- }
8241
- return null;
8242
- };
8243
8224
  return /*#__PURE__*/React__default.createElement(AccordionContainer, {
8225
+ showLine: showLine,
8244
8226
  tabIndex: 0,
8245
- onKeyDown: keyDown
8246
- }, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
8227
+ onKeyDown: keyDown,
8228
+ className: className
8229
+ }, /*#__PURE__*/React__default.createElement(TitleContainer$3, {
8247
8230
  onClick: toggleAccordion,
8248
8231
  tabIndex: -1,
8249
8232
  role: "button",
8250
8233
  "aria-label": title,
8251
8234
  "aria-expanded": openAccordion,
8252
8235
  "aria-controls": contentContainerId
8253
- }, /*#__PURE__*/React__default.createElement(AccordionTitle, {
8254
- level: displayLevel,
8255
- semanticLevel: semanticLevel
8256
- }, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
8236
+ }, /*#__PURE__*/React__default.createElement(TitleText$1, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
8257
8237
  iconName: iconName
8258
- })))), visibleStandfirst && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
8238
+ })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
8259
8239
  "data-testid": "richcontainer",
8260
8240
  ref: content,
8261
8241
  textHeight: textHeight,
8262
8242
  id: contentContainerId,
8263
- "aria-live": "polite"
8243
+ "aria-live": "polite",
8244
+ tag: "div"
8264
8245
  }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
8265
8246
  isVisible: childrenVisibility
8266
- }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
8247
+ }, children)));
8267
8248
  };
8268
8249
 
8269
8250
  var _templateObject$S;
@@ -8271,19 +8252,18 @@ var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templat
8271
8252
 
8272
8253
  var Accordions = function Accordions(_ref) {
8273
8254
  var _ref$items = _ref.items,
8274
- items = _ref$items === void 0 ? [] : _ref$items;
8255
+ items = _ref$items === void 0 ? [] : _ref$items,
8256
+ className = _ref.className;
8275
8257
  var isLastAccordion = function isLastAccordion(index) {
8276
8258
  return items.length - 1 === index;
8277
8259
  };
8278
- return /*#__PURE__*/React__default.createElement(AccordionsContainer, null, items.map(function (accordion, index) {
8260
+ return /*#__PURE__*/React__default.createElement(AccordionsContainer, {
8261
+ className: className
8262
+ }, items.map(function (accordion, index) {
8279
8263
  return /*#__PURE__*/React__default.createElement(Accordion, {
8280
8264
  key: accordion.title + "-" + index,
8281
8265
  title: accordion.title,
8282
- showLine: isLastAccordion(index),
8283
- visibleStandfirst: accordion.visibleStandfirst,
8284
- contentType: accordion.contentType,
8285
- displayLevel: accordion.displayLevel,
8286
- semanticLevel: accordion.semanticLevel
8266
+ showLine: isLastAccordion(index)
8287
8267
  }, accordion.children);
8288
8268
  }));
8289
8269
  };
@@ -8371,7 +8351,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
8371
8351
  }))))));
8372
8352
  };
8373
8353
 
8374
- var _templateObject$U, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$j, _templateObject6$e, _templateObject7$a, _templateObject8$8, _templateObject9$6, _templateObject0$5, _templateObject1$2, _templateObject10$2, _templateObject11$2, _templateObject12$2;
8354
+ var _templateObject$U, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$j, _templateObject6$e, _templateObject7$b, _templateObject8$8, _templateObject9$6, _templateObject0$5, _templateObject1$2, _templateObject10$2, _templateObject11$2, _templateObject12$2;
8375
8355
  var LENGTH_LARGE_TEXT = 28;
8376
8356
  var LENGTH_SMALL_TEXT$1 = 19;
8377
8357
  var LENGTH_TEXT_TABLET = 10;
@@ -8396,7 +8376,7 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$p || (_templat
8396
8376
  });
8397
8377
  var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8398
8378
  var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8399
- var TextContainer$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8379
+ var TextContainer$2 = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8400
8380
  var HighlightTextContainer = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
8401
8381
  var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
8402
8382
  var LabelContainer = /*#__PURE__*/styled.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 25px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
@@ -8654,14 +8634,14 @@ var Cards = function Cards(_ref) {
8654
8634
  }));
8655
8635
  };
8656
8636
 
8657
- var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$b;
8637
+ var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$c;
8658
8638
  var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
8659
8639
  var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), devices.mobileAndTablet);
8660
8640
  var AddressWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
8661
8641
  var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
8662
8642
  var MobileSuffixWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8663
8643
  var DesktopSuffixWrapper = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8664
- var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: 4px;\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
8644
+ var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: 4px;\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
8665
8645
 
8666
8646
  var ContactCard = function ContactCard(_ref) {
8667
8647
  var title = _ref.title,
@@ -8809,17 +8789,21 @@ var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$w || (_templ
8809
8789
  var imageToLeft = _ref3.imageToLeft;
8810
8790
  return imageToLeft ? 'right' : 'left';
8811
8791
  }, devices.mobile);
8812
- var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
8813
- var EditorialText = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
8792
+ var EditorialSubtitle = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
8793
+ var EditorialText = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n margin: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
8814
8794
 
8815
8795
  var Editorial = function Editorial(_ref) {
8816
8796
  var _ref$imagePosition = _ref.imagePosition,
8817
8797
  imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
8818
8798
  subtitle = _ref.subtitle,
8819
8799
  text = _ref.text,
8820
- children = _ref.children;
8800
+ children = _ref.children,
8801
+ className = _ref.className;
8821
8802
  var imageToLeft = imagePosition === 'left';
8822
- return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
8803
+ return /*#__PURE__*/React__default.createElement(Grid, {
8804
+ className: className,
8805
+ "data-testid": "editorial-component"
8806
+ }, /*#__PURE__*/React__default.createElement(GridItem, {
8823
8807
  columnStartDesktop: 3,
8824
8808
  columnSpanDesktop: 12,
8825
8809
  columnStartDevice: 2,
@@ -8834,7 +8818,10 @@ var Editorial = function Editorial(_ref) {
8834
8818
  }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
8835
8819
  "data-testid": "text-wrapper",
8836
8820
  imageToLeft: imageToLeft
8837
- }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
8821
+ }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
8822
+ tag: "span"
8823
+ }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
8824
+ tag: "div",
8838
8825
  dangerouslySetInnerHTML: {
8839
8826
  __html: text
8840
8827
  }
@@ -9080,7 +9067,7 @@ var Information = function Information(_ref) {
9080
9067
  })))));
9081
9068
  };
9082
9069
 
9083
- var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$n, _templateObject6$h, _templateObject7$c, _templateObject8$9;
9070
+ var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$n, _templateObject6$h, _templateObject7$d, _templateObject8$9;
9084
9071
  var PageHeadingWrapper = /*#__PURE__*/styled('div')(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
9085
9072
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
9086
9073
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
@@ -9099,7 +9086,7 @@ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateOb
9099
9086
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
9100
9087
  }, devices.mobile);
9101
9088
  var TextWrapper = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
9102
- var LogoWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
9089
+ var LogoWrapper = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
9103
9090
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
9104
9091
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
9105
9092
  }, devices.mobile, function (_ref6) {
@@ -9181,14 +9168,14 @@ var PageHeading = function PageHeading(_ref) {
9181
9168
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
9182
9169
  };
9183
9170
 
9184
- var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$v, _templateObject5$o, _templateObject6$i, _templateObject7$d, _templateObject8$a;
9171
+ var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$v, _templateObject5$o, _templateObject6$i, _templateObject7$e, _templateObject8$a;
9185
9172
  var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
9186
9173
  var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
9187
9174
  var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
9188
9175
  var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
9189
9176
  var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
9190
9177
  var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
9191
- var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
9178
+ var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
9192
9179
  var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
9193
9180
 
9194
9181
  var _excluded$m = ["text"];
@@ -9296,7 +9283,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9296
9283
  })))));
9297
9284
  };
9298
9285
 
9299
- var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$x, _templateObject5$q, _templateObject6$j, _templateObject7$e, _templateObject8$b, _templateObject9$7, _templateObject0$6, _templateObject1$3;
9286
+ var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$x, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject0$6, _templateObject1$3;
9300
9287
  var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9301
9288
  var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
9302
9289
  var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
@@ -9309,7 +9296,7 @@ var ContentSection = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObj
9309
9296
  return showBlock ? 'block' : 'none';
9310
9297
  }, devices.mobile);
9311
9298
  var BadgeWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
9312
- var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
9299
+ var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
9313
9300
  var isBadgePresent = _ref3.isBadgePresent;
9314
9301
  return isBadgePresent ? '1' : '4';
9315
9302
  });
@@ -9558,7 +9545,7 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
9558
9545
  })))));
9559
9546
  };
9560
9547
 
9561
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$k, _templateObject7$f, _templateObject8$c, _templateObject9$8, _templateObject0$7;
9548
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$8, _templateObject0$7;
9562
9549
  var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__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);
9563
9550
  var BrandingTextBody = /*#__PURE__*/styled.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"])));
9564
9551
  var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
@@ -9579,7 +9566,7 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (
9579
9566
  var theme = _ref4.theme;
9580
9567
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
9581
9568
  }, devices.tablet, devices.mobile);
9582
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
9569
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
9583
9570
  var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
9584
9571
  var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
9585
9572
  var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
@@ -9812,13 +9799,13 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9812
9799
  }), linkText))))));
9813
9800
  };
9814
9801
 
9815
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$g, _templateObject8$d;
9802
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$d;
9816
9803
  var linkButtonStyles = /*#__PURE__*/css(_templateObject$15 || (_templateObject$15 = /*#__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"])));
9817
9804
  var PageNav = /*#__PURE__*/styled.a(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9818
9805
  var PaginationLink = /*#__PURE__*/styled.a(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9819
9806
  var PageNumberWrapper = /*#__PURE__*/styled.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"])));
9820
9807
  var LastPageItem = /*#__PURE__*/styled.li(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9821
- var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9808
+ var PreviousPageItem = /*#__PURE__*/styled.li(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9822
9809
  var TextLinkPagination = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
9823
9810
  var active = _ref.active;
9824
9811
  return active ? "var(--color-primary-red)" : 'inherit';
@@ -9967,14 +9954,14 @@ var Pagination = function Pagination(_ref) {
9967
9954
  }))))));
9968
9955
  };
9969
9956
 
9970
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$h;
9957
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i;
9971
9958
  var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$16 || (_templateObject$16 = /*#__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);
9972
9959
  var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
9973
9960
  var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
9974
9961
  var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9975
9962
  var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9976
9963
  var PersonLink = /*#__PURE__*/styled.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"])));
9977
- var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9964
+ var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9978
9965
 
9979
9966
  var Person = function Person(_ref) {
9980
9967
  var person = _ref.person,
@@ -10165,7 +10152,7 @@ var CreditListing = function CreditListing(_ref) {
10165
10152
  }, creditEntries);
10166
10153
  };
10167
10154
 
10168
- var _templateObject$18, _templateObject3$I, _templateObject4$B, _templateObject5$u, _templateObject6$n, _templateObject7$i, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16;
10155
+ var _templateObject$18, _templateObject3$I, _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;
10169
10156
  var LENGTH_TEXT = 28;
10170
10157
  var LENGTH_TEXT_TABLET$1 = 12;
10171
10158
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10215,7 +10202,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject4$B || (_te
10215
10202
  });
10216
10203
  var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10217
10204
  var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
10218
- var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
10205
+ var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
10219
10206
  var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
10220
10207
  var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
10221
10208
  var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
@@ -10420,7 +10407,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10420
10407
  }))));
10421
10408
  };
10422
10409
 
10423
- var _templateObject$19, _templateObject2$V, _templateObject3$J, _templateObject4$C, _templateObject5$v, _templateObject6$o, _templateObject7$j;
10410
+ var _templateObject$19, _templateObject2$V, _templateObject3$J, _templateObject4$C, _templateObject5$v, _templateObject6$o, _templateObject7$k;
10424
10411
  var LENGTH_TEXT$2 = 28;
10425
10412
  var LENGTH_TEXT_TABLET$2 = 10;
10426
10413
  var PromoWithTitleGrid = /*#__PURE__*/styled(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"])), function (_ref) {
@@ -10441,7 +10428,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$J ||
10441
10428
  var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled(HarmonicHeader)(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10442
10429
  var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10443
10430
  var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled(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);
10444
- var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$j || (_templateObject7$j = /*#__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) {
10431
+ var ButtonsContainer$3 = /*#__PURE__*/styled.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) {
10445
10432
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
10446
10433
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
10447
10434
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -10891,7 +10878,7 @@ var SectionTitle = function SectionTitle(_ref) {
10891
10878
  }, description)))));
10892
10879
  };
10893
10880
 
10894
- var _templateObject$1f, _templateObject2$Y, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$p, _templateObject7$k, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
10881
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$p, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
10895
10882
  var stateStyles = /*#__PURE__*/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) {
10896
10883
  var theme = _ref.theme;
10897
10884
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10917,7 +10904,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10917
10904
  };
10918
10905
  })(_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"])));
10919
10906
  var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10920
- var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10907
+ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10921
10908
  var Options = /*#__PURE__*/styled.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10922
10909
  var Option = /*#__PURE__*/styled.li(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10923
10910
  var theme = _ref6.theme,
@@ -11891,7 +11878,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
11891
11878
  }, strengthLabel))));
11892
11879
  };
11893
11880
 
11894
- var _templateObject$1n, _templateObject2$14, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$s, _templateObject7$l, _templateObject8$g;
11881
+ var _templateObject$1n, _templateObject2$14, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$s, _templateObject7$m, _templateObject8$g;
11895
11882
  var TableContainer = /*#__PURE__*/styled.table(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11896
11883
  var Container$6 = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11897
11884
  var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
@@ -11902,7 +11889,7 @@ var TableCell = /*#__PURE__*/styled.td(_templateObject5$B || (_templateObject5$B
11902
11889
  return "calc(100% / " + (props.columns - 1) + ")";
11903
11890
  }, devices.mobile);
11904
11891
  var PaginationWrapper = /*#__PURE__*/styled(Pagination)(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
11905
- var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
11892
+ var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
11906
11893
  var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11907
11894
 
11908
11895
  /* eslint-disable react/no-danger */
@@ -12106,7 +12093,7 @@ var Table = function Table(_ref) {
12106
12093
  }))));
12107
12094
  };
12108
12095
 
12109
- var _templateObject$1o, _templateObject2$15, _templateObject3$U, _templateObject4$K, _templateObject5$C, _templateObject6$t, _templateObject7$m, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
12096
+ var _templateObject$1o, _templateObject2$15, _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;
12110
12097
  var Wrapper$a = /*#__PURE__*/styled('div')(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
12111
12098
  var theme = _ref.theme;
12112
12099
  return "var(--color-" + theme + ")";
@@ -12119,7 +12106,7 @@ var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$U || (_temp
12119
12106
  var Error = /*#__PURE__*/styled.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"])));
12120
12107
  var Form = /*#__PURE__*/styled.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);
12121
12108
  var FormFooterWrapper = /*#__PURE__*/styled.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);
12122
- var ServerError = /*#__PURE__*/styled.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
12109
+ var ServerError = /*#__PURE__*/styled.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
12123
12110
  var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
12124
12111
  var ButtonWrapper$3 = /*#__PURE__*/styled.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
12125
12112
  var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);