@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.cjs.development.js CHANGED
@@ -231,21 +231,24 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
231
231
  /* ~~~ Subtitle - (use case) ~~~ */
232
232
  var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
233
233
  var children = _ref3.children,
234
- size = _ref3.size,
234
+ _ref3$size = _ref3.size,
235
+ size = _ref3$size === void 0 ? 'large' : _ref3$size,
235
236
  _ref3$color = _ref3.color,
236
237
  color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
237
- className = _ref3.className;
238
+ className = _ref3.className,
239
+ _ref3$tag = _ref3.tag,
240
+ Tag = _ref3$tag === void 0 ? 'p' : _ref3$tag;
238
241
  var classNames = createClassNames('subtitle', {
239
242
  size: size,
240
243
  color: color,
241
244
  className: className
242
245
  }, typographyStyles);
243
- return /*#__PURE__*/React__default.createElement("p", {
246
+ return /*#__PURE__*/React__default.createElement(Tag, {
244
247
  className: classNames
245
248
  }, children);
246
249
  };
247
250
  /* ~~~ Body Copy Text - (use case) ~~~ */
248
- var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
251
+ var BodyCopyHarmonic = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
249
252
  var children = _ref4.children,
250
253
  _ref4$size = _ref4.size,
251
254
  size = _ref4$size === void 0 ? 'medium' : _ref4$size,
@@ -263,9 +266,11 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
263
266
  className: className
264
267
  }, typographyStyles);
265
268
  return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
266
- className: classNames
269
+ className: classNames,
270
+ ref: ref
267
271
  }, props), children);
268
- };
272
+ });
273
+ BodyCopyHarmonic.displayName = 'BodyCopyHarmonic';
269
274
  /* ~~~ Overline - (use case) ~~~ */
270
275
  var HarmonicOverline = function HarmonicOverline(_ref5) {
271
276
  var children = _ref5.children,
@@ -8108,19 +8113,30 @@ var InfoSection = function InfoSection(_ref) {
8108
8113
  }, additionalInfo)))));
8109
8114
  };
8110
8115
 
8111
- var _templateObject$R, _templateObject2$D, _templateObject3$r, _templateObject4$n, _templateObject5$h, _templateObject6$d;
8112
- var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
8113
- var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
8114
- var ChildrenContainer = /*#__PURE__*/styled__default.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) {
8115
- var isVisible = _ref.isVisible;
8116
- return isVisible ? 'visible' : 'hidden';
8116
+ var _templateObject$R, _templateObject2$D, _templateObject3$r, _templateObject4$n, _templateObject5$h, _templateObject6$d, _templateObject7$a;
8117
+ var AccordionContainer = /*#__PURE__*/styled__default.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) {
8118
+ var showLine = _ref.showLine;
8119
+ return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
8120
+ });
8121
+ var ChildrenContainer = /*#__PURE__*/styled__default.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) {
8122
+ var isVisible = _ref2.isVisible;
8123
+ return isVisible ? 1 : 0;
8124
+ }, function (_ref3) {
8125
+ var isVisible = _ref3.isVisible;
8126
+ return isVisible ? 'auto' : 'none';
8117
8127
  }, devices.mobile);
8118
- var TitleContainer$3 = /*#__PURE__*/styled__default.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);
8119
- var ContentContainer = /*#__PURE__*/styled__default.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) {
8120
- var textHeight = _ref2.textHeight;
8128
+ var TitleContainer$3 = /*#__PURE__*/styled__default.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"])));
8129
+ var TitleText$1 = /*#__PURE__*/styled__default(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"])));
8130
+ var ExtendedBodyCopyHarmonic = /*#__PURE__*/styled__default(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"])));
8131
+ var ContentContainer = /*#__PURE__*/styled__default(ExtendedBodyCopyHarmonic).withConfig({
8132
+ shouldForwardProp: function shouldForwardProp(prop) {
8133
+ return prop !== 'textHeight';
8134
+ }
8135
+ })(_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) {
8136
+ var textHeight = _ref4.textHeight;
8121
8137
  return textHeight;
8122
8138
  }, devices.mobile);
8123
- var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
8139
+ var PrintHideWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
8124
8140
 
8125
8141
  /* eslint-disable react/no-unstable-nested-components */
8126
8142
  var Accordion = function Accordion(_ref) {
@@ -8129,15 +8145,9 @@ var Accordion = function Accordion(_ref) {
8129
8145
  _ref$showLine = _ref.showLine,
8130
8146
  showLine = _ref$showLine === void 0 ? true : _ref$showLine,
8131
8147
  children = _ref.children,
8132
- visibleStandfirst = _ref.visibleStandfirst,
8133
8148
  _ref$initOpen = _ref.initOpen,
8134
8149
  initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
8135
- _ref$contentType = _ref.contentType,
8136
- contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
8137
- _ref$semanticLevel = _ref.semanticLevel,
8138
- semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
8139
- _ref$displayLevel = _ref.displayLevel,
8140
- displayLevel = _ref$displayLevel === void 0 ? 1 : _ref$displayLevel;
8150
+ className = _ref.className;
8141
8151
  var _useState = React.useState(initOpen),
8142
8152
  openAccordion = _useState[0],
8143
8153
  setOpenAccordion = _useState[1];
@@ -8169,60 +8179,31 @@ var Accordion = function Accordion(_ref) {
8169
8179
  toggleAccordion();
8170
8180
  }
8171
8181
  };
8172
- var Standfirst = function Standfirst() {
8173
- return visibleStandfirst ? (/*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
8174
- isVisible: childrenVisibility
8175
- }, visibleStandfirst))) : null;
8176
- };
8177
8182
  var contentContainerId = title + "-accordion-content";
8178
- var AccordionTitle = function AccordionTitle(_ref2) {
8179
- var level = _ref2.level,
8180
- localSemanticLevel = _ref2.semanticLevel;
8181
- var subtitleLevel = level;
8182
- if (contentType === 'header') {
8183
- return /*#__PURE__*/React__default.createElement(Header, {
8184
- semanticLevel: localSemanticLevel,
8185
- level: level
8186
- }, title);
8187
- }
8188
- if (contentType === 'subtitle') {
8189
- if (contentType === 'subtitle') {
8190
- if (![1, 2].includes(level)) {
8191
- console.warn('Invalid Subtitle level:', level);
8192
- subtitleLevel = level > 2 ? 2 : level;
8193
- }
8194
- }
8195
- return /*#__PURE__*/React__default.createElement(Subtitle, Object.assign({}, {
8196
- level: subtitleLevel,
8197
- semanticLevel: localSemanticLevel
8198
- }), title);
8199
- }
8200
- return null;
8201
- };
8202
8183
  return /*#__PURE__*/React__default.createElement(AccordionContainer, {
8184
+ showLine: showLine,
8203
8185
  tabIndex: 0,
8204
- onKeyDown: keyDown
8205
- }, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$3, {
8186
+ onKeyDown: keyDown,
8187
+ className: className
8188
+ }, /*#__PURE__*/React__default.createElement(TitleContainer$3, {
8206
8189
  onClick: toggleAccordion,
8207
8190
  tabIndex: -1,
8208
8191
  role: "button",
8209
8192
  "aria-label": title,
8210
8193
  "aria-expanded": openAccordion,
8211
8194
  "aria-controls": contentContainerId
8212
- }, /*#__PURE__*/React__default.createElement(AccordionTitle, {
8213
- level: displayLevel,
8214
- semanticLevel: semanticLevel
8215
- }, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
8195
+ }, /*#__PURE__*/React__default.createElement(TitleText$1, null, title), children && (/*#__PURE__*/React__default.createElement(PrintHideWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
8216
8196
  iconName: iconName
8217
- })))), visibleStandfirst && /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
8197
+ })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
8218
8198
  "data-testid": "richcontainer",
8219
8199
  ref: content,
8220
8200
  textHeight: textHeight,
8221
8201
  id: contentContainerId,
8222
- "aria-live": "polite"
8202
+ "aria-live": "polite",
8203
+ tag: "div"
8223
8204
  }, /*#__PURE__*/React__default.createElement(ChildrenContainer, {
8224
8205
  isVisible: childrenVisibility
8225
- }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
8206
+ }, children)));
8226
8207
  };
8227
8208
 
8228
8209
  var _templateObject$S;
@@ -8230,19 +8211,18 @@ var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$S ||
8230
8211
 
8231
8212
  var Accordions = function Accordions(_ref) {
8232
8213
  var _ref$items = _ref.items,
8233
- items = _ref$items === void 0 ? [] : _ref$items;
8214
+ items = _ref$items === void 0 ? [] : _ref$items,
8215
+ className = _ref.className;
8234
8216
  var isLastAccordion = function isLastAccordion(index) {
8235
8217
  return items.length - 1 === index;
8236
8218
  };
8237
- return /*#__PURE__*/React__default.createElement(AccordionsContainer, null, items.map(function (accordion, index) {
8219
+ return /*#__PURE__*/React__default.createElement(AccordionsContainer, {
8220
+ className: className
8221
+ }, items.map(function (accordion, index) {
8238
8222
  return /*#__PURE__*/React__default.createElement(Accordion, {
8239
8223
  key: accordion.title + "-" + index,
8240
8224
  title: accordion.title,
8241
- showLine: isLastAccordion(index),
8242
- visibleStandfirst: accordion.visibleStandfirst,
8243
- contentType: accordion.contentType,
8244
- displayLevel: accordion.displayLevel,
8245
- semanticLevel: accordion.semanticLevel
8225
+ showLine: isLastAccordion(index)
8246
8226
  }, accordion.children);
8247
8227
  }));
8248
8228
  };
@@ -8330,7 +8310,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
8330
8310
  }))))));
8331
8311
  };
8332
8312
 
8333
- 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;
8313
+ 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;
8334
8314
  var LENGTH_LARGE_TEXT = 28;
8335
8315
  var LENGTH_SMALL_TEXT$1 = 19;
8336
8316
  var LENGTH_TEXT_TABLET = 10;
@@ -8355,7 +8335,7 @@ var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$p ||
8355
8335
  });
8356
8336
  var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8357
8337
  var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8358
- var TextContainer$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8338
+ var TextContainer$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8359
8339
  var HighlightTextContainer = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
8360
8340
  var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
8361
8341
  var LabelContainer = /*#__PURE__*/styled__default.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) {
@@ -8613,14 +8593,14 @@ var Cards = function Cards(_ref) {
8613
8593
  }));
8614
8594
  };
8615
8595
 
8616
- var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$b;
8596
+ var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$c;
8617
8597
  var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
8618
8598
  var Wrapper$4 = /*#__PURE__*/styled__default.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);
8619
8599
  var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
8620
8600
  var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
8621
8601
  var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8622
8602
  var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8623
- var DetailsWrapper = /*#__PURE__*/styled__default.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);
8603
+ var DetailsWrapper = /*#__PURE__*/styled__default.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);
8624
8604
 
8625
8605
  var ContactCard = function ContactCard(_ref) {
8626
8606
  var title = _ref.title,
@@ -8768,17 +8748,21 @@ var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w |
8768
8748
  var imageToLeft = _ref3.imageToLeft;
8769
8749
  return imageToLeft ? 'right' : 'left';
8770
8750
  }, devices.mobile);
8771
- var EditorialSubtitle = /*#__PURE__*/styled__default.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"])));
8772
- var EditorialText = /*#__PURE__*/styled__default.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"])));
8751
+ var EditorialSubtitle = /*#__PURE__*/styled__default(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"])));
8752
+ var EditorialText = /*#__PURE__*/styled__default(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"])));
8773
8753
 
8774
8754
  var Editorial = function Editorial(_ref) {
8775
8755
  var _ref$imagePosition = _ref.imagePosition,
8776
8756
  imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
8777
8757
  subtitle = _ref.subtitle,
8778
8758
  text = _ref.text,
8779
- children = _ref.children;
8759
+ children = _ref.children,
8760
+ className = _ref.className;
8780
8761
  var imageToLeft = imagePosition === 'left';
8781
- return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
8762
+ return /*#__PURE__*/React__default.createElement(Grid, {
8763
+ className: className,
8764
+ "data-testid": "editorial-component"
8765
+ }, /*#__PURE__*/React__default.createElement(GridItem, {
8782
8766
  columnStartDesktop: 3,
8783
8767
  columnSpanDesktop: 12,
8784
8768
  columnStartDevice: 2,
@@ -8793,7 +8777,10 @@ var Editorial = function Editorial(_ref) {
8793
8777
  }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
8794
8778
  "data-testid": "text-wrapper",
8795
8779
  imageToLeft: imageToLeft
8796
- }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
8780
+ }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
8781
+ tag: "span"
8782
+ }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
8783
+ tag: "div",
8797
8784
  dangerouslySetInnerHTML: {
8798
8785
  __html: text
8799
8786
  }
@@ -9039,7 +9026,7 @@ var Information = function Information(_ref) {
9039
9026
  })))));
9040
9027
  };
9041
9028
 
9042
- var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$n, _templateObject6$h, _templateObject7$c, _templateObject8$9;
9029
+ var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$n, _templateObject6$h, _templateObject7$d, _templateObject8$9;
9043
9030
  var PageHeadingWrapper = /*#__PURE__*/styled__default('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) {
9044
9031
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
9045
9032
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
@@ -9058,7 +9045,7 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_t
9058
9045
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
9059
9046
  }, devices.mobile);
9060
9047
  var TextWrapper = /*#__PURE__*/styled__default.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"])));
9061
- var LogoWrapper = /*#__PURE__*/styled__default.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) {
9048
+ var LogoWrapper = /*#__PURE__*/styled__default.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) {
9062
9049
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
9063
9050
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
9064
9051
  }, devices.mobile, function (_ref6) {
@@ -9140,14 +9127,14 @@ var PageHeading = function PageHeading(_ref) {
9140
9127
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
9141
9128
  };
9142
9129
 
9143
- var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$v, _templateObject5$o, _templateObject6$i, _templateObject7$d, _templateObject8$a;
9130
+ var _templateObject$10, _templateObject2$N, _templateObject3$A, _templateObject4$v, _templateObject5$o, _templateObject6$i, _templateObject7$e, _templateObject8$a;
9144
9131
  var ImpactWrapper = /*#__PURE__*/styled__default.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);
9145
9132
  var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.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);
9146
9133
  var ImpactGrid = /*#__PURE__*/styled__default(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);
9147
9134
  var SponsorWrapper = /*#__PURE__*/styled__default.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);
9148
9135
  var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
9149
9136
  var TextWrapper$1 = /*#__PURE__*/styled__default.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);
9150
- var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
9137
+ var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
9151
9138
  var ScrollDownWrapper = /*#__PURE__*/styled__default.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);
9152
9139
 
9153
9140
  var _excluded$m = ["text"];
@@ -9255,7 +9242,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9255
9242
  })))));
9256
9243
  };
9257
9244
 
9258
- var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$x, _templateObject5$q, _templateObject6$j, _templateObject7$e, _templateObject8$b, _templateObject9$7, _templateObject0$6, _templateObject1$3;
9245
+ var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject4$x, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject0$6, _templateObject1$3;
9259
9246
  var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9260
9247
  var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
9261
9248
  var SponsorWrapper$1 = /*#__PURE__*/styled__default.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);
@@ -9268,7 +9255,7 @@ var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$q || (_te
9268
9255
  return showBlock ? 'block' : 'none';
9269
9256
  }, devices.mobile);
9270
9257
  var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
9271
- var AdditionalContentWrapper = /*#__PURE__*/styled__default.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) {
9258
+ var AdditionalContentWrapper = /*#__PURE__*/styled__default.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) {
9272
9259
  var isBadgePresent = _ref3.isBadgePresent;
9273
9260
  return isBadgePresent ? '1' : '4';
9274
9261
  });
@@ -9517,7 +9504,7 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
9517
9504
  })))));
9518
9505
  };
9519
9506
 
9520
- var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$k, _templateObject7$f, _templateObject8$c, _templateObject9$8, _templateObject0$7;
9507
+ var _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$c, _templateObject9$8, _templateObject0$7;
9521
9508
  var BrandingTextBlock = /*#__PURE__*/styled__default.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);
9522
9509
  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"])));
9523
9510
  var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
@@ -9538,7 +9525,7 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
9538
9525
  var theme = _ref4.theme;
9539
9526
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
9540
9527
  }, devices.tablet, devices.mobile);
9541
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.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);
9528
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.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);
9542
9529
  var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.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);
9543
9530
  var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.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);
9544
9531
  var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(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) {
@@ -9771,13 +9758,13 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9771
9758
  }), linkText))))));
9772
9759
  };
9773
9760
 
9774
- var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$g, _templateObject8$d;
9761
+ var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$d;
9775
9762
  var linkButtonStyles = /*#__PURE__*/styled.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"])));
9776
9763
  var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9777
9764
  var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
9778
9765
  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"])));
9779
9766
  var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9780
- var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9767
+ var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
9781
9768
  var TextLinkPagination = /*#__PURE__*/styled__default(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) {
9782
9769
  var active = _ref.active;
9783
9770
  return active ? "var(--color-primary-red)" : 'inherit';
@@ -9926,14 +9913,14 @@ var Pagination = function Pagination(_ref) {
9926
9913
  }))))));
9927
9914
  };
9928
9915
 
9929
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$h;
9916
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i;
9930
9917
  var PeopleListingGrid = /*#__PURE__*/styled__default(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);
9931
9918
  var PersonWrapper = /*#__PURE__*/styled__default.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"])));
9932
9919
  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"])));
9933
9920
  var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9934
9921
  var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9935
9922
  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"])));
9936
- var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9923
+ var ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9937
9924
 
9938
9925
  var Person = function Person(_ref) {
9939
9926
  var person = _ref.person,
@@ -10124,7 +10111,7 @@ var CreditListing = function CreditListing(_ref) {
10124
10111
  }, creditEntries);
10125
10112
  };
10126
10113
 
10127
- 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;
10114
+ 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;
10128
10115
  var LENGTH_TEXT = 28;
10129
10116
  var LENGTH_TEXT_TABLET$1 = 12;
10130
10117
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -10174,7 +10161,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$
10174
10161
  });
10175
10162
  var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
10176
10163
  var TextLinkWrapper$3 = /*#__PURE__*/styled__default.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"])));
10177
- var ExtraContentWrapper = /*#__PURE__*/styled__default.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);
10164
+ var ExtraContentWrapper = /*#__PURE__*/styled__default.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);
10178
10165
  var IconWrapper$2 = /*#__PURE__*/styled__default.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);
10179
10166
  var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
10180
10167
  var MobileTitleWrapper = /*#__PURE__*/styled__default.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);
@@ -10379,7 +10366,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10379
10366
  }))));
10380
10367
  };
10381
10368
 
10382
- var _templateObject$19, _templateObject2$V, _templateObject3$J, _templateObject4$C, _templateObject5$v, _templateObject6$o, _templateObject7$j;
10369
+ var _templateObject$19, _templateObject2$V, _templateObject3$J, _templateObject4$C, _templateObject5$v, _templateObject6$o, _templateObject7$k;
10383
10370
  var LENGTH_TEXT$2 = 28;
10384
10371
  var LENGTH_TEXT_TABLET$2 = 10;
10385
10372
  var PromoWithTitleGrid = /*#__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"])), function (_ref) {
@@ -10400,7 +10387,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
10400
10387
  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);
10401
10388
  var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10402
10389
  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);
10403
- var ButtonsContainer$3 = /*#__PURE__*/styled__default.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) {
10390
+ 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) {
10404
10391
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
10405
10392
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
10406
10393
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -10850,7 +10837,7 @@ var SectionTitle = function SectionTitle(_ref) {
10850
10837
  }, description)))));
10851
10838
  };
10852
10839
 
10853
- var _templateObject$1f, _templateObject2$Y, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$p, _templateObject7$k, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
10840
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$p, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$9, _templateObject1$5;
10854
10841
  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) {
10855
10842
  var theme = _ref.theme;
10856
10843
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10876,7 +10863,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10876
10863
  };
10877
10864
  })(_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"])));
10878
10865
  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);
10879
- var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10866
+ var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10880
10867
  var Options = /*#__PURE__*/styled__default.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10881
10868
  var Option = /*#__PURE__*/styled__default.li(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10882
10869
  var theme = _ref6.theme,
@@ -11850,7 +11837,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
11850
11837
  }, strengthLabel))));
11851
11838
  };
11852
11839
 
11853
- var _templateObject$1n, _templateObject2$14, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$s, _templateObject7$l, _templateObject8$g;
11840
+ var _templateObject$1n, _templateObject2$14, _templateObject3$T, _templateObject4$J, _templateObject5$B, _templateObject6$s, _templateObject7$m, _templateObject8$g;
11854
11841
  var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11855
11842
  var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11856
11843
  var Wrapper$9 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
@@ -11861,7 +11848,7 @@ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$B || (_template
11861
11848
  return "calc(100% / " + (props.columns - 1) + ")";
11862
11849
  }, devices.mobile);
11863
11850
  var PaginationWrapper = /*#__PURE__*/styled__default(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);
11864
- var ScrollButtons = /*#__PURE__*/styled__default.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"])));
11851
+ var ScrollButtons = /*#__PURE__*/styled__default.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"])));
11865
11852
  var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11866
11853
 
11867
11854
  /* eslint-disable react/no-danger */
@@ -12065,7 +12052,7 @@ var Table = function Table(_ref) {
12065
12052
  }))));
12066
12053
  };
12067
12054
 
12068
- 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;
12055
+ 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;
12069
12056
  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) {
12070
12057
  var theme = _ref.theme;
12071
12058
  return "var(--color-" + theme + ")";
@@ -12078,7 +12065,7 @@ var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$U
12078
12065
  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"])));
12079
12066
  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);
12080
12067
  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);
12081
- var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
12068
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
12082
12069
  var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
12083
12070
  var ButtonWrapper$3 = /*#__PURE__*/styled__default.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);
12084
12071
  var FieldsWrapper = /*#__PURE__*/styled__default.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);