@royaloperahouse/harmonic 0.2.3-j → 0.2.3-l

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.
@@ -414,7 +414,7 @@ function styleInject(css, ref) {
414
414
  }
415
415
  }
416
416
 
417
- var css_248z = "/* Base classes */\n.typography-module_display__ZHsz9 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n}\n\n.typography-module_header__FVsLI {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_subtitle__x3sSn {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_bodycopy__-BY2U {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_overline__y1yCC {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.typography-module_buttontext__Gp0W- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_captiontext__zyA-- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n/* Size modifiers */\n.typography-module_display--large__RwPQD {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n}\n\n.typography-module_display--small__XWUSJ {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n}\n\n.typography-module_header--large__2vP3p {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n}\n\n.typography-module_header--medium__OgzlB {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n}\n\n.typography-module_header--small__zLuFf {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--large__1Ep9J {\n font-size: 24px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--medium__8FxeU {\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--small__Vt9bZ {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--large__BNzf2 {\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--medium__cwJEu {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--small__fTLSM {\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.25px;\n}\n\n.typography-module_overline--large__79WUM {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 1.7px;\n}\n\n.typography-module_overline--medium__Y5z3w {\n font-size: 15px;\n line-height: 20px;\n letter-spacing: 1.5px;\n}\n\n.typography-module_overline--small__MGEG6 {\n font-size: 13px;\n line-height: 16px;\n letter-spacing: 1.3px;\n}\n\n/* Button, Caption, Navigation text */\n.typography-module_buttontext__Gp0W- {\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_captiontext__zyA-- {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n}\n\n/* Color modifiers */\n.typography-module_display--primary__9sTwU,\n.typography-module_header--primary__KF0PJ,\n.typography-module_subtitle--primary__yL-hS,\n.typography-module_bodycopy--primary__5Uo2D,\n.typography-module_overline--primary__a2NSa,\n.typography-module_buttontext--primary__HnmE3,\n.typography-module_captiontext--primary__mmafI,\n.typography-module_navigationtext--primary__vIsUl {\n color: var(--color-primary);\n}\n\n\n.typography-module_display--black__8hmsx,\n.typography-module_header--black__M3I14,\n.typography-module_subtitle--black__IQRSo,\n.typography-module_bodycopy--black__J8BNP,\n.typography-module_overline--black__RUDoj,\n.typography-module_buttontext--black__irjmz,\n.typography-module_captiontext--black__7axhP,\n.typography-module_navigationtext--black__wDz-G {\n color: var(--color-base-black);\n}\n\n.typography-module_display--white__3QA6W,\n.typography-module_header--white__mm-ex,\n.typography-module_subtitle--white__VzQ3K,\n.typography-module_bodycopy--white__NJ8J8,\n.typography-module_overline--white__cV5QV,\n.typography-module_buttontext--white__rrr8U,\n.typography-module_captiontext--white__OMFwW,\n.typography-module_navigationtext--white__5YDdY {\n color: var(--color-base-white);\n}\n\n.typography-module_display--red__khdLJ,\n.typography-module_header--red__hxuj9,\n.typography-module_subtitle--red__gSK7d,\n.typography-module_bodycopy--red__P5Mau,\n.typography-module_overline--red__OW5dE,\n.typography-module_buttontext--red__mlRi2,\n.typography-module_captiontext--red__jMQIK,\n.typography-module_navigationtext--red__-QADV {\n color: var(--color-primary-red);\n}\n\n.typography-module_display--grey__RsgTf,\n.typography-module_header--grey__rC0vN,\n.typography-module_subtitle--grey__1nkEx,\n.typography-module_bodycopy--grey__SNnaU,\n.typography-module_overline--grey__lGOsK,\n.typography-module_buttontext--grey__1Y4oX,\n.typography-module_captiontext--grey__V0MLc,\n.typography-module_navigationtext--grey__xi3sz {\n color: var(--color-base-dark-grey);\n}\n\n.typography-module_display--inherit__ZNOHM,\n.typography-module_header--inherit__qmHQE,\n.typography-module_subtitle--inherit__mly-X, \n.typography-module_bodycopy--inherit__CoC-f,\n.typography-module_overline--inherit__Cq4ni,\n.typography-module_buttontext--inherit__vguWx,\n.typography-module_captiontext--inherit__ya6gm,\n.typography-module_navigationtext--inherit__cJLWf {\n color: inherit;\n}\n\n/* Typography variants */\n.typography-module_display--serif__C0-Ve,\n.typography-module_header--serif__uTGCc {\n font-family: var(--font-family-serif);\n}\n\n.typography-module_display--em__h2bPV,\n.typography-module_header--em__UFQIA {\n font-family: var(--font-family-serif);\n font-style: italic;\n}\n\n.typography-module_display--bold__PG-8g,\n.typography-module_header--bold__InvJk,\n.typography-module_subtitle--bold__Subov,\n.typography-module_bodycopy--bold__nZX3C,\n.typography-module_overline--bold__3mUXy,\n.typography-module_buttontext--bold__rBKIJ,\n.typography-module_captiontext--bold__ebTyV,\n.typography-module_navigationtext--bold__SRlV2 {\n font-weight: 700;\n}\n\n/* Media queries */\n@media (max-width: 699px) {\n .typography-module_display--large__RwPQD {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_display--small__XWUSJ {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_header--large__2vP3p {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_header--medium__OgzlB {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n .typography-module_header--small__zLuFf {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n .typography-module_subtitle--large__1Ep9J {\n font-size: 20px;\n line-height: 28px;\n }\n \n .typography-module_subtitle--medium__8FxeU {\n font-size: 17px;\n line-height: 24px;\n }\n \n .typography-module_bodycopy--large__BNzf2 {\n font-size: 17px;\n line-height: 24px;\n }\n}";
417
+ var css_248z = "/* Base classes */\n.typography-module_display__ZHsz9 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n}\n\n.typography-module_header__FVsLI {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_subtitle__x3sSn {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_bodycopy__-BY2U {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_overline__y1yCC {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.typography-module_buttontext__Gp0W- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_captiontext__zyA-- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n/* Size modifiers */\n.typography-module_display--large__RwPQD {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n}\n\n.typography-module_display--small__XWUSJ {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n}\n\n.typography-module_header--large__2vP3p {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n}\n\n.typography-module_header--medium__OgzlB {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n}\n\n.typography-module_header--small__zLuFf {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--large__1Ep9J {\n font-size: 24px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--medium__8FxeU {\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--small__Vt9bZ {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--large__BNzf2 {\n font-size: 19px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--medium__cwJEu {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--small__fTLSM {\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.25px;\n}\n\n.typography-module_overline--large__79WUM {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 1.7px;\n}\n\n.typography-module_overline--medium__Y5z3w {\n font-size: 15px;\n line-height: 20px;\n letter-spacing: 1.5px;\n}\n\n.typography-module_overline--small__MGEG6 {\n font-size: 13px;\n line-height: 16px;\n letter-spacing: 1.3px;\n}\n\n/* Button, Caption, Navigation text */\n.typography-module_buttontext__Gp0W- {\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_captiontext__zyA-- {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n}\n\n/* Color modifiers */\n.typography-module_display--primary__9sTwU,\n.typography-module_header--primary__KF0PJ,\n.typography-module_subtitle--primary__yL-hS,\n.typography-module_bodycopy--primary__5Uo2D,\n.typography-module_overline--primary__a2NSa,\n.typography-module_buttontext--primary__HnmE3,\n.typography-module_captiontext--primary__mmafI,\n.typography-module_navigationtext--primary__vIsUl {\n color: var(--color-primary);\n}\n\n\n.typography-module_display--black__8hmsx,\n.typography-module_header--black__M3I14,\n.typography-module_subtitle--black__IQRSo,\n.typography-module_bodycopy--black__J8BNP,\n.typography-module_overline--black__RUDoj,\n.typography-module_buttontext--black__irjmz,\n.typography-module_captiontext--black__7axhP,\n.typography-module_navigationtext--black__wDz-G {\n color: var(--color-base-black);\n}\n\n.typography-module_display--white__3QA6W,\n.typography-module_header--white__mm-ex,\n.typography-module_subtitle--white__VzQ3K,\n.typography-module_bodycopy--white__NJ8J8,\n.typography-module_overline--white__cV5QV,\n.typography-module_buttontext--white__rrr8U,\n.typography-module_captiontext--white__OMFwW,\n.typography-module_navigationtext--white__5YDdY {\n color: var(--color-base-white);\n}\n\n.typography-module_display--red__khdLJ,\n.typography-module_header--red__hxuj9,\n.typography-module_subtitle--red__gSK7d,\n.typography-module_bodycopy--red__P5Mau,\n.typography-module_overline--red__OW5dE,\n.typography-module_buttontext--red__mlRi2,\n.typography-module_captiontext--red__jMQIK,\n.typography-module_navigationtext--red__-QADV {\n color: var(--color-primary-red);\n}\n\n.typography-module_display--grey__RsgTf,\n.typography-module_header--grey__rC0vN,\n.typography-module_subtitle--grey__1nkEx,\n.typography-module_bodycopy--grey__SNnaU,\n.typography-module_overline--grey__lGOsK,\n.typography-module_buttontext--grey__1Y4oX,\n.typography-module_captiontext--grey__V0MLc,\n.typography-module_navigationtext--grey__xi3sz {\n color: var(--color-base-dark-grey);\n}\n\n.typography-module_display--inherit__ZNOHM,\n.typography-module_header--inherit__qmHQE,\n.typography-module_subtitle--inherit__mly-X, \n.typography-module_bodycopy--inherit__CoC-f,\n.typography-module_overline--inherit__Cq4ni,\n.typography-module_buttontext--inherit__vguWx,\n.typography-module_captiontext--inherit__ya6gm,\n.typography-module_navigationtext--inherit__cJLWf {\n color: inherit;\n}\n\n/* Typography variants */\n.typography-module_display--serif__C0-Ve,\n.typography-module_header--serif__uTGCc {\n font-family: var(--font-family-serif);\n}\n\n.typography-module_display--em__h2bPV,\n.typography-module_header--em__UFQIA {\n font-family: var(--font-family-serif);\n font-style: italic;\n}\n\n.typography-module_display--bold__PG-8g,\n.typography-module_header--bold__InvJk,\n.typography-module_subtitle--bold__Subov,\n.typography-module_bodycopy--bold__nZX3C,\n.typography-module_overline--bold__3mUXy,\n.typography-module_buttontext--bold__rBKIJ,\n.typography-module_captiontext--bold__ebTyV,\n.typography-module_navigationtext--bold__SRlV2 {\n font-weight: 700;\n}\n\n/* Media queries */\n@media (max-width: 699px) {\n .typography-module_display--large__RwPQD {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_display--small__XWUSJ {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_header--large__2vP3p {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_header--medium__OgzlB {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n .typography-module_header--small__zLuFf {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n .typography-module_subtitle--large__1Ep9J {\n font-size: 20px;\n line-height: 28px;\n }\n \n .typography-module_subtitle--medium__8FxeU {\n font-size: 17px;\n line-height: 24px;\n }\n \n .typography-module_bodycopy--large__BNzf2 {\n font-size: 17px;\n line-height: 24px;\n }\n}";
418
418
  var styles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--medium":"typography-module_subtitle--medium__8FxeU","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--medium":"typography-module_overline--medium__Y5z3w","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
419
419
  styleInject(css_248z);
420
420
 
@@ -502,7 +502,7 @@ var ButtonText = function ButtonText(_ref6) {
502
502
  color: color,
503
503
  className: className
504
504
  }, styles);
505
- return /*#__PURE__*/React__default.createElement("p", {
505
+ return /*#__PURE__*/React__default.createElement("span", {
506
506
  className: classNames
507
507
  }, children);
508
508
  };
@@ -820,7 +820,7 @@ var devices = {
820
820
  };
821
821
 
822
822
  var _templateObject$1, _templateObject2;
823
- var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
823
+ var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
824
824
  var iconName = _ref.iconName;
825
825
  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
826
826
  }, devices.mobile);
@@ -2730,7 +2730,9 @@ var Button = function Button(_ref) {
2730
2730
  iconName: iconName,
2731
2731
  direction: iconDirection,
2732
2732
  color: color
2733
- }))) : null, truncatedString);
2733
+ }))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
2734
+ color: "inherit"
2735
+ }, truncatedString));
2734
2736
  };
2735
2737
 
2736
2738
  var getPointerEvents = function getPointerEvents(_ref) {
@@ -2935,7 +2937,7 @@ var getTextColor$2 = function getTextColor(_ref) {
2935
2937
  };
2936
2938
 
2937
2939
  var _templateObject$5, _templateObject2$3;
2938
- var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
2940
+ var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
2939
2941
  var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n min-width: 20px;\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n display: inline-block;\n"])));
2940
2942
 
2941
2943
  var _excluded$5 = ["children", "className"];
@@ -2951,7 +2953,9 @@ var TertiaryButton = function TertiaryButton(_ref) {
2951
2953
  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
2952
2954
  className: className,
2953
2955
  onClick: handleClick
2954
- }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
2956
+ }), /*#__PURE__*/React__default.createElement(ButtonText, {
2957
+ color: "inherit"
2958
+ }, truncatedString), /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
2955
2959
  "data-testid": "tertiary-icon"
2956
2960
  }, /*#__PURE__*/React__default.createElement(Icon, {
2957
2961
  iconName: "Arrow"
@@ -4313,6 +4317,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
4313
4317
  role: "alert",
4314
4318
  "aria-live": "assertive"
4315
4319
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
4320
+ color: "inherit",
4316
4321
  size: "large"
4317
4322
  }, error))));
4318
4323
  };
@@ -6003,7 +6008,7 @@ var Navigation = function Navigation(_ref) {
6003
6008
  onSearch = _ref.onSearch,
6004
6009
  onLink = _ref.onLink,
6005
6010
  _ref$crest = _ref.crest,
6006
- crest = _ref$crest === void 0 ? true : _ref$crest,
6011
+ crest = _ref$crest === void 0 ? false : _ref$crest,
6007
6012
  className = _ref.className,
6008
6013
  logoLink = _ref.logoLink;
6009
6014
  var _useState = useState(dataNavTop),
@@ -7963,7 +7968,7 @@ var Carousel = function Carousel(_ref) {
7963
7968
  };
7964
7969
 
7965
7970
  var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
7966
- var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n .color-primary {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
7971
+ var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
7967
7972
  var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
7968
7973
  var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7969
7974
  var InfoWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
@@ -7998,7 +8003,7 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
7998
8003
  };
7999
8004
 
8000
8005
  var _templateObject$Q;
8001
- var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
8006
+ var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
8002
8007
 
8003
8008
  var _excluded$i = ["children", "className"];
8004
8009
  var AuxiliaryButton = function AuxiliaryButton(_ref) {
@@ -8112,6 +8117,7 @@ var InfoSection = function InfoSection(_ref) {
8112
8117
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
8113
8118
  "data-testid": "highlight-carousel-timer-wrapper"
8114
8119
  }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
8120
+ className: "highlight-carousel-text",
8115
8121
  size: "large"
8116
8122
  }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
8117
8123
  color: Colors.White,
@@ -8119,19 +8125,24 @@ var InfoSection = function InfoSection(_ref) {
8119
8125
  endDate: timerParams.endDate,
8120
8126
  title: timerParams.title
8121
8127
  })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8128
+ className: TYPOGRAPHY_CLASS_NAME,
8122
8129
  size: "large",
8123
8130
  hierarchy: "h3"
8124
8131
  }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8132
+ className: TYPOGRAPHY_CLASS_NAME,
8125
8133
  size: "large"
8126
8134
  }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8135
+ className: TYPOGRAPHY_CLASS_NAME,
8127
8136
  size: "large"
8128
8137
  }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8138
+ className: TYPOGRAPHY_CLASS_NAME,
8129
8139
  size: "large"
8130
8140
  }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
8131
8141
  dangerouslySetInnerHTML: {
8132
8142
  __html: description
8133
8143
  }
8134
8144
  })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8145
+ className: TYPOGRAPHY_CLASS_NAME,
8135
8146
  size: "large"
8136
8147
  }, additionalInfo)))));
8137
8148
  };
@@ -11909,17 +11920,17 @@ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObjec
11909
11920
  return "var(--color-" + theme + ")";
11910
11921
  });
11911
11922
  var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
11912
- var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--base-color-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11913
- var Error$1 = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11923
+ var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11924
+ var Error$1 = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11914
11925
  var Form = /*#__PURE__*/styled.form(_templateObject5$A || (_templateObject5$A = /*#__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$1);
11915
11926
  var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__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);
11916
- var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11917
- var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
11918
- var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
11927
+ var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11928
+ var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11929
+ var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
11919
11930
  var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$a || (_templateObject10$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);
11920
11931
  var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11921
11932
  var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
11922
- var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--base-color-black);\n margin: 0;\n }\n"])), function (_ref3) {
11933
+ var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
11923
11934
  var _ref3$isOpen = _ref3.isOpen,
11924
11935
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
11925
11936
  return isOpen ? '180deg' : '0deg';
@@ -11927,6 +11938,54 @@ var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateO
11927
11938
  var HiddenInstructions = /*#__PURE__*/styled.div(_templateObject14$4 || (_templateObject14$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n"])));
11928
11939
  var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
11929
11940
 
11941
+ var themeToColor = function themeToColor(theme) {
11942
+ switch (theme) {
11943
+ case ThemeType.Core:
11944
+ return ThemeColor['primary-red'];
11945
+ case ThemeType.Stream:
11946
+ return ThemeColor['base-black'];
11947
+ case ThemeType.Cinema:
11948
+ return ThemeColor['primary-black'];
11949
+ default:
11950
+ return ThemeColor['primary-red'];
11951
+ }
11952
+ };
11953
+
11954
+ var SignUpTitle = function SignUpTitle(_ref) {
11955
+ var title = _ref.title,
11956
+ _ref$isMobile = _ref.isMobile,
11957
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11958
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11959
+ columnStartDesktop: 3,
11960
+ columnSpanDesktop: 10,
11961
+ columnStartDevice: 2,
11962
+ columnSpanDevice: 12
11963
+ }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11964
+ color: "black",
11965
+ hierarchy: "h3",
11966
+ serif: true,
11967
+ size: isMobile ? 'small' : 'medium'
11968
+ }, title)));
11969
+ };
11970
+
11971
+ var SignUpMessage = function SignUpMessage(_ref) {
11972
+ var message = _ref.message,
11973
+ _ref$withDropdown = _ref.withDropdown,
11974
+ withDropdown = _ref$withDropdown === void 0 ? false : _ref$withDropdown;
11975
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11976
+ columnStartDesktop: 3,
11977
+ columnSpanDesktop: 10,
11978
+ columnStartDevice: 2,
11979
+ columnSpanDevice: withDropdown ? 11 : 12
11980
+ }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11981
+ size: "large"
11982
+ }, /*#__PURE__*/React__default.createElement("div", {
11983
+ dangerouslySetInnerHTML: {
11984
+ __html: message
11985
+ }
11986
+ }))));
11987
+ };
11988
+
11930
11989
  var regex = {
11931
11990
  signInEmail:
11932
11991
  // eslint-disable-next-line max-len
@@ -11972,65 +12031,33 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
11972
12031
  return errorMessage;
11973
12032
  };
11974
12033
 
11975
- var themeToColor = function themeToColor(theme) {
11976
- switch (theme) {
11977
- case ThemeType.Core:
11978
- return ThemeColor['primary-red'];
11979
- case ThemeType.Stream:
11980
- return ThemeColor['base-black'];
11981
- case ThemeType.Cinema:
11982
- return ThemeColor['primary-black'];
11983
- default:
11984
- return ThemeColor['primary-red'];
12034
+ var BUTTON_TEXT = 'Sign up';
12035
+ var SignUpFormButton = function SignUpFormButton(_ref) {
12036
+ var theme = _ref.theme;
12037
+ if (theme === ThemeType.Core) {
12038
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, null, BUTTON_TEXT);
11985
12039
  }
11986
- };
11987
-
11988
- var SignUpTitle = function SignUpTitle(_ref) {
11989
- var title = _ref.title,
12040
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, {
12041
+ textColor: ThemeColor['base-white'],
12042
+ backgroundColor: ThemeColor['base-black'],
12043
+ hoveredColor: ThemeColor['black-hovered'],
12044
+ pressedColor: ThemeColor['black-pressed']
12045
+ }, BUTTON_TEXT);
12046
+ };
12047
+
12048
+ var SignUpForm = function SignUpForm(_ref) {
12049
+ var submitHandler = _ref.submitHandler,
12050
+ errorMessage = _ref.errorMessage,
12051
+ ctaPrivacy = _ref.ctaPrivacy,
12052
+ theme = _ref.theme,
12053
+ isSuccess = _ref.isSuccess,
12054
+ setIsSuccess = _ref.setIsSuccess,
12055
+ formValues = _ref.formValues,
12056
+ setFormValues = _ref.setFormValues,
12057
+ _ref$isLoggedIn = _ref.isLoggedIn,
12058
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
11990
12059
  _ref$isMobile = _ref.isMobile,
11991
12060
  isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11992
- return /*#__PURE__*/React__default.createElement(GridItem, {
11993
- columnStartDesktop: 3,
11994
- columnSpanDesktop: 10,
11995
- columnStartDevice: 2,
11996
- columnSpanDevice: 12
11997
- }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11998
- color: "black",
11999
- hierarchy: "h3",
12000
- serif: true,
12001
- size: isMobile ? 'small' : 'medium'
12002
- }, title)));
12003
- };
12004
- var SignUpMessage = function SignUpMessage(_ref2) {
12005
- var message = _ref2.message,
12006
- _ref2$withDropdown = _ref2.withDropdown,
12007
- withDropdown = _ref2$withDropdown === void 0 ? false : _ref2$withDropdown;
12008
- return /*#__PURE__*/React__default.createElement(GridItem, {
12009
- columnStartDesktop: 3,
12010
- columnSpanDesktop: 10,
12011
- columnStartDevice: 2,
12012
- columnSpanDevice: withDropdown ? 11 : 12
12013
- }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12014
- size: "large"
12015
- }, /*#__PURE__*/React__default.createElement("div", {
12016
- dangerouslySetInnerHTML: {
12017
- __html: message
12018
- }
12019
- }))));
12020
- };
12021
- var SignUpForm = function SignUpForm(_ref3) {
12022
- var submitHandler = _ref3.submitHandler,
12023
- errorMessage = _ref3.errorMessage,
12024
- ctaPrivacy = _ref3.ctaPrivacy,
12025
- theme = _ref3.theme,
12026
- isSuccess = _ref3.isSuccess,
12027
- setIsSuccess = _ref3.setIsSuccess,
12028
- formValues = _ref3.formValues,
12029
- setFormValues = _ref3.setFormValues,
12030
- _ref3$isLoggedIn = _ref3.isLoggedIn,
12031
- isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
12032
- _ref3$isMobile = _ref3.isMobile,
12033
- isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
12034
12061
  var _useState = useState({}),
12035
12062
  errors = _useState[0],
12036
12063
  setErrors = _useState[1];
@@ -12060,7 +12087,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12060
12087
  };
12061
12088
  };
12062
12089
  var handleFormSubmit = /*#__PURE__*/function () {
12063
- var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12090
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12064
12091
  var formErrors, response;
12065
12092
  return _regeneratorRuntime().wrap(function _callee$(_context) {
12066
12093
  while (1) switch (_context.prev = _context.next) {
@@ -12115,7 +12142,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12115
12142
  }, _callee);
12116
12143
  }));
12117
12144
  return function handleFormSubmit(_x) {
12118
- return _ref4.apply(this, arguments);
12145
+ return _ref2.apply(this, arguments);
12119
12146
  };
12120
12147
  }();
12121
12148
  return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -12178,45 +12205,47 @@ var SignUpForm = function SignUpForm(_ref3) {
12178
12205
  size: "small"
12179
12206
  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12180
12207
  type: "submit"
12181
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12182
- backgroundColor: themeToColor(theme)
12183
- }, "Sign up")))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12208
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12209
+ theme: theme
12210
+ })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12184
12211
  type: "submit"
12185
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12186
- backgroundColor: themeToColor(theme)
12187
- }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12212
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12213
+ theme: theme
12214
+ })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12188
12215
  href: ctaPrivacy.link
12189
12216
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12190
- size: "large"
12217
+ size: "medium"
12191
12218
  }, ctaPrivacy.text))))));
12192
12219
  };
12193
- var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12194
- var initialState = _ref5.initialState,
12195
- submittedState = _ref5.submittedState,
12196
- ctaPrivacy = _ref5.ctaPrivacy,
12197
- theme = _ref5.theme,
12198
- errorMessage = _ref5.errorMessage,
12199
- _ref5$isLoggedIn = _ref5.isLoggedIn,
12200
- isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
12201
- className = _ref5.className,
12202
- submitHandler = _ref5.submitHandler;
12220
+
12221
+ /* eslint-disable react/no-danger */
12222
+ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12223
+ var initialState = _ref.initialState,
12224
+ submittedState = _ref.submittedState,
12225
+ ctaPrivacy = _ref.ctaPrivacy,
12226
+ theme = _ref.theme,
12227
+ errorMessage = _ref.errorMessage,
12228
+ _ref$isLoggedIn = _ref.isLoggedIn,
12229
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
12230
+ className = _ref.className,
12231
+ submitHandler = _ref.submitHandler;
12203
12232
  var signUpHeaderId = 'signup-header';
12204
12233
  var signUpInstructionsId = 'sign-up-instructions';
12205
12234
  var isMobile = useMobile();
12235
+ var _useState = useState(false),
12236
+ isSuccess = _useState[0],
12237
+ setIsSuccess = _useState[1];
12206
12238
  var _useState2 = useState(false),
12207
- isSuccess = _useState2[0],
12208
- setIsSuccess = _useState2[1];
12209
- var _useState3 = useState(false),
12210
- dropdownOpen = _useState3[0],
12211
- setDropdownOpen = _useState3[1];
12239
+ dropdownOpen = _useState2[0],
12240
+ setDropdownOpen = _useState2[1];
12212
12241
  var successRef = useRef(null);
12213
- var _useState4 = useState({
12242
+ var _useState3 = useState({
12214
12243
  firstName: '',
12215
12244
  lastName: '',
12216
12245
  email: ''
12217
12246
  }),
12218
- formValues = _useState4[0],
12219
- setFormValues = _useState4[1];
12247
+ formValues = _useState3[0],
12248
+ setFormValues = _useState3[1];
12220
12249
  useEffect(function () {
12221
12250
  if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
12222
12251
  successRef.current.scrollIntoView({
@@ -12364,6 +12393,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
12364
12393
  }));
12365
12394
  };
12366
12395
 
12396
+ var TYPOGRAPHY_CLASS_NAME = 'highlight-carousel-text';
12367
12397
  var HighlightsCarousel = function HighlightsCarousel(_ref) {
12368
12398
  var logo = _ref.logo,
12369
12399
  carouselTitle = _ref.carouselTitle,
@@ -12410,6 +12440,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12410
12440
  }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
12411
12441
  id: carouselTitleId
12412
12442
  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
12443
+ className: TYPOGRAPHY_CLASS_NAME,
12413
12444
  size: "medium",
12414
12445
  serif: true,
12415
12446
  hierarchy: titleSemanticLevelValue