@royaloperahouse/harmonic 0.2.3-k → 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.
Files changed (12) hide show
  1. package/dist/components/molecules/SignUpForm/components/SignUpForm.d.ts +4 -0
  2. package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts +7 -0
  3. package/dist/components/molecules/SignUpForm/components/SignUpMessage.d.ts +4 -0
  4. package/dist/components/molecules/SignUpForm/components/SignUpTitle.d.ts +4 -0
  5. package/dist/harmonic.cjs.development.css +1 -1
  6. package/dist/harmonic.cjs.development.js +119 -96
  7. package/dist/harmonic.cjs.development.js.map +1 -1
  8. package/dist/harmonic.cjs.production.min.js +1 -1
  9. package/dist/harmonic.cjs.production.min.js.map +1 -1
  10. package/dist/harmonic.esm.js +120 -97
  11. package/dist/harmonic.esm.js.map +1 -1
  12. package/package.json +1 -1
package/dist/components/molecules/SignUpForm/components/SignUpForm.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { SignUpFormComponentFormProps } from '../../../../types/signUpForm';
3
+ declare const SignUpForm: FunctionComponent<SignUpFormComponentFormProps>;
4
+ export default SignUpForm;
package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { ThemeType } from '../../../../types/types';
3
+ declare type Props = {
4
+ theme: ThemeType;
5
+ };
6
+ declare const SignUpFormButton: React.FC<Props>;
7
+ export default SignUpFormButton;
package/dist/components/molecules/SignUpForm/components/SignUpMessage.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { SignUpFormComponentMessageProps } from '../../../../types/signUpForm';
3
+ declare const SignUpMessage: FunctionComponent<SignUpFormComponentMessageProps>;
4
+ export default SignUpMessage;
package/dist/components/molecules/SignUpForm/components/SignUpTitle.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { SignUpFormComponentTitleProps } from '../../../../types/signUpForm';
3
+ declare const SignUpTitle: FunctionComponent<SignUpFormComponentTitleProps>;
4
+ export default SignUpTitle;
package/dist/harmonic.cjs.development.css CHANGED
@@ -98,7 +98,7 @@
98
98
  }
99
99
 
100
100
  .typography-module_bodycopy--large__BNzf2 {
101
- font-size: 20px;
101
+ font-size: 19px;
102
102
  line-height: 28px;
103
103
  letter-spacing: -0.5px;
104
104
  }
package/dist/harmonic.cjs.development.js CHANGED
@@ -482,7 +482,7 @@ var ButtonText = function ButtonText(_ref6) {
482
482
  color: color,
483
483
  className: className
484
484
  }, styles);
485
- return /*#__PURE__*/React__default.createElement("p", {
485
+ return /*#__PURE__*/React__default.createElement("span", {
486
486
  className: classNames
487
487
  }, children);
488
488
  };
@@ -797,7 +797,7 @@ var devices = {
797
797
  };
798
798
 
799
799
  var _templateObject$1, _templateObject2;
800
- var ButtonWrapper = /*#__PURE__*/styled__default.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) {
800
+ var ButtonWrapper = /*#__PURE__*/styled__default.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) {
801
801
  var iconName = _ref.iconName;
802
802
  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
803
803
  }, devices.mobile);
@@ -2707,7 +2707,9 @@ var Button = function Button(_ref) {
2707
2707
  iconName: iconName,
2708
2708
  direction: iconDirection,
2709
2709
  color: color
2710
- }))) : null, truncatedString);
2710
+ }))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
2711
+ color: "inherit"
2712
+ }, truncatedString));
2711
2713
  };
2712
2714
 
2713
2715
  var getPointerEvents = function getPointerEvents(_ref) {
@@ -2912,7 +2914,7 @@ var getTextColor$2 = function getTextColor(_ref) {
2912
2914
  };
2913
2915
 
2914
2916
  var _templateObject$5, _templateObject2$3;
2915
- var TertiaryButtonWrapper = /*#__PURE__*/styled__default.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);
2917
+ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.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);
2916
2918
  var TertiaryIconWrapper = /*#__PURE__*/styled__default.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"])));
2917
2919
 
2918
2920
  var _excluded$5 = ["children", "className"];
@@ -2928,7 +2930,9 @@ var TertiaryButton = function TertiaryButton(_ref) {
2928
2930
  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
2929
2931
  className: className,
2930
2932
  onClick: handleClick
2931
- }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
2933
+ }), /*#__PURE__*/React__default.createElement(ButtonText, {
2934
+ color: "inherit"
2935
+ }, truncatedString), /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
2932
2936
  "data-testid": "tertiary-icon"
2933
2937
  }, /*#__PURE__*/React__default.createElement(Icon, {
2934
2938
  iconName: "Arrow"
@@ -4289,6 +4293,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
4289
4293
  role: "alert",
4290
4294
  "aria-live": "assertive"
4291
4295
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
4296
+ color: "inherit",
4292
4297
  size: "large"
4293
4298
  }, error))));
4294
4299
  };
@@ -5978,7 +5983,7 @@ var Navigation = function Navigation(_ref) {
5978
5983
  onSearch = _ref.onSearch,
5979
5984
  onLink = _ref.onLink,
5980
5985
  _ref$crest = _ref.crest,
5981
- crest = _ref$crest === void 0 ? true : _ref$crest,
5986
+ crest = _ref$crest === void 0 ? false : _ref$crest,
5982
5987
  className = _ref.className,
5983
5988
  logoLink = _ref.logoLink;
5984
5989
  var _useState = React.useState(dataNavTop),
@@ -7971,7 +7976,7 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
7971
7976
  };
7972
7977
 
7973
7978
  var _templateObject$Q;
7974
- var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(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);
7979
+ var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(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);
7975
7980
 
7976
7981
  var _excluded$i = ["children", "className"];
7977
7982
  var AuxiliaryButton = function AuxiliaryButton(_ref) {
@@ -11888,17 +11893,17 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
11888
11893
  return "var(--color-" + theme + ")";
11889
11894
  });
11890
11895
  var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
11891
- var SignUpTitleWrapper = /*#__PURE__*/styled__default('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);
11892
- var Error$1 = /*#__PURE__*/styled__default.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"])));
11896
+ var SignUpTitleWrapper = /*#__PURE__*/styled__default('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);
11897
+ var Error$1 = /*#__PURE__*/styled__default.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"])));
11893
11898
  var Form = /*#__PURE__*/styled__default.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);
11894
11899
  var FormFooterWrapper = /*#__PURE__*/styled__default.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);
11895
- var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11896
- var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
11897
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.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);
11900
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11901
+ var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11902
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
11898
11903
  var FieldsWrapper = /*#__PURE__*/styled__default.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);
11899
11904
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11900
11905
  var DropdownAreaWrapper = /*#__PURE__*/styled__default.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"])));
11901
- var DropdownWrapper = /*#__PURE__*/styled__default.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) {
11906
+ var DropdownWrapper = /*#__PURE__*/styled__default.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) {
11902
11907
  var _ref3$isOpen = _ref3.isOpen,
11903
11908
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
11904
11909
  return isOpen ? '180deg' : '0deg';
@@ -11906,6 +11911,54 @@ var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$4 || (_
11906
11911
  var HiddenInstructions = /*#__PURE__*/styled__default.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"])));
11907
11912
  var SignUpHeader = /*#__PURE__*/styled__default(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
11908
11913
 
11914
+ var themeToColor = function themeToColor(theme) {
11915
+ switch (theme) {
11916
+ case exports.ThemeType.Core:
11917
+ return ThemeColor['primary-red'];
11918
+ case exports.ThemeType.Stream:
11919
+ return ThemeColor['base-black'];
11920
+ case exports.ThemeType.Cinema:
11921
+ return ThemeColor['primary-black'];
11922
+ default:
11923
+ return ThemeColor['primary-red'];
11924
+ }
11925
+ };
11926
+
11927
+ var SignUpTitle = function SignUpTitle(_ref) {
11928
+ var title = _ref.title,
11929
+ _ref$isMobile = _ref.isMobile,
11930
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11931
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11932
+ columnStartDesktop: 3,
11933
+ columnSpanDesktop: 10,
11934
+ columnStartDevice: 2,
11935
+ columnSpanDevice: 12
11936
+ }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11937
+ color: "black",
11938
+ hierarchy: "h3",
11939
+ serif: true,
11940
+ size: isMobile ? 'small' : 'medium'
11941
+ }, title)));
11942
+ };
11943
+
11944
+ var SignUpMessage = function SignUpMessage(_ref) {
11945
+ var message = _ref.message,
11946
+ _ref$withDropdown = _ref.withDropdown,
11947
+ withDropdown = _ref$withDropdown === void 0 ? false : _ref$withDropdown;
11948
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11949
+ columnStartDesktop: 3,
11950
+ columnSpanDesktop: 10,
11951
+ columnStartDevice: 2,
11952
+ columnSpanDevice: withDropdown ? 11 : 12
11953
+ }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11954
+ size: "large"
11955
+ }, /*#__PURE__*/React__default.createElement("div", {
11956
+ dangerouslySetInnerHTML: {
11957
+ __html: message
11958
+ }
11959
+ }))));
11960
+ };
11961
+
11909
11962
  var regex = {
11910
11963
  signInEmail:
11911
11964
  // eslint-disable-next-line max-len
@@ -11951,65 +12004,33 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
11951
12004
  return errorMessage;
11952
12005
  };
11953
12006
 
11954
- var themeToColor = function themeToColor(theme) {
11955
- switch (theme) {
11956
- case exports.ThemeType.Core:
11957
- return ThemeColor['primary-red'];
11958
- case exports.ThemeType.Stream:
11959
- return ThemeColor['base-black'];
11960
- case exports.ThemeType.Cinema:
11961
- return ThemeColor['primary-black'];
11962
- default:
11963
- return ThemeColor['primary-red'];
12007
+ var BUTTON_TEXT = 'Sign up';
12008
+ var SignUpFormButton = function SignUpFormButton(_ref) {
12009
+ var theme = _ref.theme;
12010
+ if (theme === exports.ThemeType.Core) {
12011
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, null, BUTTON_TEXT);
11964
12012
  }
11965
- };
11966
-
11967
- var SignUpTitle = function SignUpTitle(_ref) {
11968
- var title = _ref.title,
12013
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, {
12014
+ textColor: ThemeColor['base-white'],
12015
+ backgroundColor: ThemeColor['base-black'],
12016
+ hoveredColor: ThemeColor['black-hovered'],
12017
+ pressedColor: ThemeColor['black-pressed']
12018
+ }, BUTTON_TEXT);
12019
+ };
12020
+
12021
+ var SignUpForm = function SignUpForm(_ref) {
12022
+ var submitHandler = _ref.submitHandler,
12023
+ errorMessage = _ref.errorMessage,
12024
+ ctaPrivacy = _ref.ctaPrivacy,
12025
+ theme = _ref.theme,
12026
+ isSuccess = _ref.isSuccess,
12027
+ setIsSuccess = _ref.setIsSuccess,
12028
+ formValues = _ref.formValues,
12029
+ setFormValues = _ref.setFormValues,
12030
+ _ref$isLoggedIn = _ref.isLoggedIn,
12031
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
11969
12032
  _ref$isMobile = _ref.isMobile,
11970
12033
  isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11971
- return /*#__PURE__*/React__default.createElement(GridItem, {
11972
- columnStartDesktop: 3,
11973
- columnSpanDesktop: 10,
11974
- columnStartDevice: 2,
11975
- columnSpanDevice: 12
11976
- }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11977
- color: "black",
11978
- hierarchy: "h3",
11979
- serif: true,
11980
- size: isMobile ? 'small' : 'medium'
11981
- }, title)));
11982
- };
11983
- var SignUpMessage = function SignUpMessage(_ref2) {
11984
- var message = _ref2.message,
11985
- _ref2$withDropdown = _ref2.withDropdown,
11986
- withDropdown = _ref2$withDropdown === void 0 ? false : _ref2$withDropdown;
11987
- return /*#__PURE__*/React__default.createElement(GridItem, {
11988
- columnStartDesktop: 3,
11989
- columnSpanDesktop: 10,
11990
- columnStartDevice: 2,
11991
- columnSpanDevice: withDropdown ? 11 : 12
11992
- }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11993
- size: "large"
11994
- }, /*#__PURE__*/React__default.createElement("div", {
11995
- dangerouslySetInnerHTML: {
11996
- __html: message
11997
- }
11998
- }))));
11999
- };
12000
- var SignUpForm = function SignUpForm(_ref3) {
12001
- var submitHandler = _ref3.submitHandler,
12002
- errorMessage = _ref3.errorMessage,
12003
- ctaPrivacy = _ref3.ctaPrivacy,
12004
- theme = _ref3.theme,
12005
- isSuccess = _ref3.isSuccess,
12006
- setIsSuccess = _ref3.setIsSuccess,
12007
- formValues = _ref3.formValues,
12008
- setFormValues = _ref3.setFormValues,
12009
- _ref3$isLoggedIn = _ref3.isLoggedIn,
12010
- isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
12011
- _ref3$isMobile = _ref3.isMobile,
12012
- isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
12013
12034
  var _useState = React.useState({}),
12014
12035
  errors = _useState[0],
12015
12036
  setErrors = _useState[1];
@@ -12039,7 +12060,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12039
12060
  };
12040
12061
  };
12041
12062
  var handleFormSubmit = /*#__PURE__*/function () {
12042
- var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12063
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12043
12064
  var formErrors, response;
12044
12065
  return _regeneratorRuntime().wrap(function _callee$(_context) {
12045
12066
  while (1) switch (_context.prev = _context.next) {
@@ -12094,7 +12115,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12094
12115
  }, _callee);
12095
12116
  }));
12096
12117
  return function handleFormSubmit(_x) {
12097
- return _ref4.apply(this, arguments);
12118
+ return _ref2.apply(this, arguments);
12098
12119
  };
12099
12120
  }();
12100
12121
  return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -12157,45 +12178,47 @@ var SignUpForm = function SignUpForm(_ref3) {
12157
12178
  size: "small"
12158
12179
  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12159
12180
  type: "submit"
12160
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12161
- backgroundColor: themeToColor(theme)
12162
- }, "Sign up")))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12181
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12182
+ theme: theme
12183
+ })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12163
12184
  type: "submit"
12164
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12165
- backgroundColor: themeToColor(theme)
12166
- }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12185
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12186
+ theme: theme
12187
+ })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12167
12188
  href: ctaPrivacy.link
12168
12189
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12169
- size: "large"
12190
+ size: "medium"
12170
12191
  }, ctaPrivacy.text))))));
12171
12192
  };
12172
- var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12173
- var initialState = _ref5.initialState,
12174
- submittedState = _ref5.submittedState,
12175
- ctaPrivacy = _ref5.ctaPrivacy,
12176
- theme = _ref5.theme,
12177
- errorMessage = _ref5.errorMessage,
12178
- _ref5$isLoggedIn = _ref5.isLoggedIn,
12179
- isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
12180
- className = _ref5.className,
12181
- submitHandler = _ref5.submitHandler;
12193
+
12194
+ /* eslint-disable react/no-danger */
12195
+ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12196
+ var initialState = _ref.initialState,
12197
+ submittedState = _ref.submittedState,
12198
+ ctaPrivacy = _ref.ctaPrivacy,
12199
+ theme = _ref.theme,
12200
+ errorMessage = _ref.errorMessage,
12201
+ _ref$isLoggedIn = _ref.isLoggedIn,
12202
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
12203
+ className = _ref.className,
12204
+ submitHandler = _ref.submitHandler;
12182
12205
  var signUpHeaderId = 'signup-header';
12183
12206
  var signUpInstructionsId = 'sign-up-instructions';
12184
12207
  var isMobile = useMobile();
12208
+ var _useState = React.useState(false),
12209
+ isSuccess = _useState[0],
12210
+ setIsSuccess = _useState[1];
12185
12211
  var _useState2 = React.useState(false),
12186
- isSuccess = _useState2[0],
12187
- setIsSuccess = _useState2[1];
12188
- var _useState3 = React.useState(false),
12189
- dropdownOpen = _useState3[0],
12190
- setDropdownOpen = _useState3[1];
12212
+ dropdownOpen = _useState2[0],
12213
+ setDropdownOpen = _useState2[1];
12191
12214
  var successRef = React.useRef(null);
12192
- var _useState4 = React.useState({
12215
+ var _useState3 = React.useState({
12193
12216
  firstName: '',
12194
12217
  lastName: '',
12195
12218
  email: ''
12196
12219
  }),
12197
- formValues = _useState4[0],
12198
- setFormValues = _useState4[1];
12220
+ formValues = _useState3[0],
12221
+ setFormValues = _useState3[1];
12199
12222
  React.useEffect(function () {
12200
12223
  if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
12201
12224
  successRef.current.scrollIntoView({