@royaloperahouse/harmonic 0.2.3-k → 0.2.3-m

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 +120 -101
  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 +121 -102
  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) {
@@ -10448,11 +10453,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10448
10453
  "data-testid": "buttons-wrapper",
10449
10454
  primaryButtonTextLength: primaryButtonText.length,
10450
10455
  tertiaryButtonTextLength: tertiaryButtonText.length
10451
- }, primaryButton ? (/*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({
10452
- target: "_blank"
10453
- }, restPrimaryButton), primaryButtonTextTruncate)) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({
10454
- target: "_blank"
10455
- }, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10456
+ }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10456
10457
  };
10457
10458
 
10458
10459
  var _templateObject$1a;
@@ -11888,17 +11889,17 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
11888
11889
  return "var(--color-" + theme + ")";
11889
11890
  });
11890
11891
  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"])));
11892
+ 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);
11893
+ 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
11894
  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
11895
  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);
11896
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11897
+ 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);
11898
+ 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
11899
  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
11900
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11900
11901
  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) {
11902
+ 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
11903
  var _ref3$isOpen = _ref3.isOpen,
11903
11904
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
11904
11905
  return isOpen ? '180deg' : '0deg';
@@ -11906,6 +11907,54 @@ var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$4 || (_
11906
11907
  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
11908
  var SignUpHeader = /*#__PURE__*/styled__default(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
11908
11909
 
11910
+ var themeToColor = function themeToColor(theme) {
11911
+ switch (theme) {
11912
+ case exports.ThemeType.Core:
11913
+ return ThemeColor['primary-red'];
11914
+ case exports.ThemeType.Stream:
11915
+ return ThemeColor['base-black'];
11916
+ case exports.ThemeType.Cinema:
11917
+ return ThemeColor['primary-black'];
11918
+ default:
11919
+ return ThemeColor['primary-red'];
11920
+ }
11921
+ };
11922
+
11923
+ var SignUpTitle = function SignUpTitle(_ref) {
11924
+ var title = _ref.title,
11925
+ _ref$isMobile = _ref.isMobile,
11926
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11927
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11928
+ columnStartDesktop: 3,
11929
+ columnSpanDesktop: 10,
11930
+ columnStartDevice: 2,
11931
+ columnSpanDevice: 12
11932
+ }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11933
+ color: "black",
11934
+ hierarchy: "h3",
11935
+ serif: true,
11936
+ size: isMobile ? 'small' : 'medium'
11937
+ }, title)));
11938
+ };
11939
+
11940
+ var SignUpMessage = function SignUpMessage(_ref) {
11941
+ var message = _ref.message,
11942
+ _ref$withDropdown = _ref.withDropdown,
11943
+ withDropdown = _ref$withDropdown === void 0 ? false : _ref$withDropdown;
11944
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11945
+ columnStartDesktop: 3,
11946
+ columnSpanDesktop: 10,
11947
+ columnStartDevice: 2,
11948
+ columnSpanDevice: withDropdown ? 11 : 12
11949
+ }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11950
+ size: "large"
11951
+ }, /*#__PURE__*/React__default.createElement("div", {
11952
+ dangerouslySetInnerHTML: {
11953
+ __html: message
11954
+ }
11955
+ }))));
11956
+ };
11957
+
11909
11958
  var regex = {
11910
11959
  signInEmail:
11911
11960
  // eslint-disable-next-line max-len
@@ -11951,65 +12000,33 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
11951
12000
  return errorMessage;
11952
12001
  };
11953
12002
 
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'];
12003
+ var BUTTON_TEXT = 'Sign up';
12004
+ var SignUpFormButton = function SignUpFormButton(_ref) {
12005
+ var theme = _ref.theme;
12006
+ if (theme === exports.ThemeType.Core) {
12007
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, null, BUTTON_TEXT);
11964
12008
  }
11965
- };
11966
-
11967
- var SignUpTitle = function SignUpTitle(_ref) {
11968
- var title = _ref.title,
12009
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, {
12010
+ textColor: ThemeColor['base-white'],
12011
+ backgroundColor: ThemeColor['base-black'],
12012
+ hoveredColor: ThemeColor['black-hovered'],
12013
+ pressedColor: ThemeColor['black-pressed']
12014
+ }, BUTTON_TEXT);
12015
+ };
12016
+
12017
+ var SignUpForm = function SignUpForm(_ref) {
12018
+ var submitHandler = _ref.submitHandler,
12019
+ errorMessage = _ref.errorMessage,
12020
+ ctaPrivacy = _ref.ctaPrivacy,
12021
+ theme = _ref.theme,
12022
+ isSuccess = _ref.isSuccess,
12023
+ setIsSuccess = _ref.setIsSuccess,
12024
+ formValues = _ref.formValues,
12025
+ setFormValues = _ref.setFormValues,
12026
+ _ref$isLoggedIn = _ref.isLoggedIn,
12027
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
11969
12028
  _ref$isMobile = _ref.isMobile,
11970
12029
  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
12030
  var _useState = React.useState({}),
12014
12031
  errors = _useState[0],
12015
12032
  setErrors = _useState[1];
@@ -12039,7 +12056,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12039
12056
  };
12040
12057
  };
12041
12058
  var handleFormSubmit = /*#__PURE__*/function () {
12042
- var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12059
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12043
12060
  var formErrors, response;
12044
12061
  return _regeneratorRuntime().wrap(function _callee$(_context) {
12045
12062
  while (1) switch (_context.prev = _context.next) {
@@ -12094,7 +12111,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12094
12111
  }, _callee);
12095
12112
  }));
12096
12113
  return function handleFormSubmit(_x) {
12097
- return _ref4.apply(this, arguments);
12114
+ return _ref2.apply(this, arguments);
12098
12115
  };
12099
12116
  }();
12100
12117
  return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -12157,45 +12174,47 @@ var SignUpForm = function SignUpForm(_ref3) {
12157
12174
  size: "small"
12158
12175
  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12159
12176
  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, {
12177
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12178
+ theme: theme
12179
+ })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12163
12180
  type: "submit"
12164
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12165
- backgroundColor: themeToColor(theme)
12166
- }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12181
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12182
+ theme: theme
12183
+ })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12167
12184
  href: ctaPrivacy.link
12168
12185
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12169
- size: "large"
12186
+ size: "medium"
12170
12187
  }, ctaPrivacy.text))))));
12171
12188
  };
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;
12189
+
12190
+ /* eslint-disable react/no-danger */
12191
+ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12192
+ var initialState = _ref.initialState,
12193
+ submittedState = _ref.submittedState,
12194
+ ctaPrivacy = _ref.ctaPrivacy,
12195
+ theme = _ref.theme,
12196
+ errorMessage = _ref.errorMessage,
12197
+ _ref$isLoggedIn = _ref.isLoggedIn,
12198
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
12199
+ className = _ref.className,
12200
+ submitHandler = _ref.submitHandler;
12182
12201
  var signUpHeaderId = 'signup-header';
12183
12202
  var signUpInstructionsId = 'sign-up-instructions';
12184
12203
  var isMobile = useMobile();
12204
+ var _useState = React.useState(false),
12205
+ isSuccess = _useState[0],
12206
+ setIsSuccess = _useState[1];
12185
12207
  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];
12208
+ dropdownOpen = _useState2[0],
12209
+ setDropdownOpen = _useState2[1];
12191
12210
  var successRef = React.useRef(null);
12192
- var _useState4 = React.useState({
12211
+ var _useState3 = React.useState({
12193
12212
  firstName: '',
12194
12213
  lastName: '',
12195
12214
  email: ''
12196
12215
  }),
12197
- formValues = _useState4[0],
12198
- setFormValues = _useState4[1];
12216
+ formValues = _useState3[0],
12217
+ setFormValues = _useState3[1];
12199
12218
  React.useEffect(function () {
12200
12219
  if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
12201
12220
  successRef.current.scrollIntoView({