@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.
- package/dist/components/molecules/SignUpForm/components/SignUpForm.d.ts +4 -0
- package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts +7 -0
- package/dist/components/molecules/SignUpForm/components/SignUpMessage.d.ts +4 -0
- package/dist/components/molecules/SignUpForm/components/SignUpTitle.d.ts +4 -0
- package/dist/harmonic.cjs.development.css +1 -1
- package/dist/harmonic.cjs.development.js +119 -96
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +120 -97
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -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:
|
|
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("
|
|
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
|
|
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,
|
|
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
|
|
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
|
-
}),
|
|
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 ?
|
|
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),
|
|
@@ -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
|
|
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) {
|
|
@@ -11915,17 +11920,17 @@ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObjec
|
|
|
11915
11920
|
return "var(--color-" + theme + ")";
|
|
11916
11921
|
});
|
|
11917
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);
|
|
11918
|
-
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-
|
|
11919
|
-
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-
|
|
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"])));
|
|
11920
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);
|
|
11921
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);
|
|
11922
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-
|
|
11923
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
11924
|
-
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
|
|
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);
|
|
11925
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);
|
|
11926
11931
|
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11927
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"])));
|
|
11928
|
-
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-
|
|
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) {
|
|
11929
11934
|
var _ref3$isOpen = _ref3.isOpen,
|
|
11930
11935
|
isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
|
|
11931
11936
|
return isOpen ? '180deg' : '0deg';
|
|
@@ -11933,6 +11938,54 @@ var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateO
|
|
|
11933
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"])));
|
|
11934
11939
|
var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
|
|
11935
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
|
+
|
|
11936
11989
|
var regex = {
|
|
11937
11990
|
signInEmail:
|
|
11938
11991
|
// eslint-disable-next-line max-len
|
|
@@ -11978,65 +12031,33 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
|
|
|
11978
12031
|
return errorMessage;
|
|
11979
12032
|
};
|
|
11980
12033
|
|
|
11981
|
-
var
|
|
11982
|
-
|
|
11983
|
-
|
|
11984
|
-
|
|
11985
|
-
|
|
11986
|
-
return ThemeColor['base-black'];
|
|
11987
|
-
case ThemeType.Cinema:
|
|
11988
|
-
return ThemeColor['primary-black'];
|
|
11989
|
-
default:
|
|
11990
|
-
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);
|
|
11991
12039
|
}
|
|
11992
|
-
|
|
11993
|
-
|
|
11994
|
-
|
|
11995
|
-
|
|
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,
|
|
11996
12059
|
_ref$isMobile = _ref.isMobile,
|
|
11997
12060
|
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11998
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11999
|
-
columnStartDesktop: 3,
|
|
12000
|
-
columnSpanDesktop: 10,
|
|
12001
|
-
columnStartDevice: 2,
|
|
12002
|
-
columnSpanDevice: 12
|
|
12003
|
-
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
12004
|
-
color: "black",
|
|
12005
|
-
hierarchy: "h3",
|
|
12006
|
-
serif: true,
|
|
12007
|
-
size: isMobile ? 'small' : 'medium'
|
|
12008
|
-
}, title)));
|
|
12009
|
-
};
|
|
12010
|
-
var SignUpMessage = function SignUpMessage(_ref2) {
|
|
12011
|
-
var message = _ref2.message,
|
|
12012
|
-
_ref2$withDropdown = _ref2.withDropdown,
|
|
12013
|
-
withDropdown = _ref2$withDropdown === void 0 ? false : _ref2$withDropdown;
|
|
12014
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
12015
|
-
columnStartDesktop: 3,
|
|
12016
|
-
columnSpanDesktop: 10,
|
|
12017
|
-
columnStartDevice: 2,
|
|
12018
|
-
columnSpanDevice: withDropdown ? 11 : 12
|
|
12019
|
-
}, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12020
|
-
size: "large"
|
|
12021
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
12022
|
-
dangerouslySetInnerHTML: {
|
|
12023
|
-
__html: message
|
|
12024
|
-
}
|
|
12025
|
-
}))));
|
|
12026
|
-
};
|
|
12027
|
-
var SignUpForm = function SignUpForm(_ref3) {
|
|
12028
|
-
var submitHandler = _ref3.submitHandler,
|
|
12029
|
-
errorMessage = _ref3.errorMessage,
|
|
12030
|
-
ctaPrivacy = _ref3.ctaPrivacy,
|
|
12031
|
-
theme = _ref3.theme,
|
|
12032
|
-
isSuccess = _ref3.isSuccess,
|
|
12033
|
-
setIsSuccess = _ref3.setIsSuccess,
|
|
12034
|
-
formValues = _ref3.formValues,
|
|
12035
|
-
setFormValues = _ref3.setFormValues,
|
|
12036
|
-
_ref3$isLoggedIn = _ref3.isLoggedIn,
|
|
12037
|
-
isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
|
|
12038
|
-
_ref3$isMobile = _ref3.isMobile,
|
|
12039
|
-
isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
|
|
12040
12061
|
var _useState = useState({}),
|
|
12041
12062
|
errors = _useState[0],
|
|
12042
12063
|
setErrors = _useState[1];
|
|
@@ -12066,7 +12087,7 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
12066
12087
|
};
|
|
12067
12088
|
};
|
|
12068
12089
|
var handleFormSubmit = /*#__PURE__*/function () {
|
|
12069
|
-
var
|
|
12090
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
|
12070
12091
|
var formErrors, response;
|
|
12071
12092
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
12072
12093
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -12121,7 +12142,7 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
12121
12142
|
}, _callee);
|
|
12122
12143
|
}));
|
|
12123
12144
|
return function handleFormSubmit(_x) {
|
|
12124
|
-
return
|
|
12145
|
+
return _ref2.apply(this, arguments);
|
|
12125
12146
|
};
|
|
12126
12147
|
}();
|
|
12127
12148
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -12184,45 +12205,47 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
12184
12205
|
size: "small"
|
|
12185
12206
|
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
|
|
12186
12207
|
type: "submit"
|
|
12187
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
12188
|
-
|
|
12189
|
-
}
|
|
12208
|
+
}, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
12209
|
+
theme: theme
|
|
12210
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
|
|
12190
12211
|
type: "submit"
|
|
12191
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
12192
|
-
|
|
12193
|
-
}
|
|
12212
|
+
}, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
12213
|
+
theme: theme
|
|
12214
|
+
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
12194
12215
|
href: ctaPrivacy.link
|
|
12195
12216
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12196
|
-
size: "
|
|
12217
|
+
size: "medium"
|
|
12197
12218
|
}, ctaPrivacy.text))))));
|
|
12198
12219
|
};
|
|
12199
|
-
|
|
12200
|
-
|
|
12201
|
-
|
|
12202
|
-
|
|
12203
|
-
|
|
12204
|
-
|
|
12205
|
-
|
|
12206
|
-
|
|
12207
|
-
|
|
12208
|
-
|
|
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;
|
|
12209
12232
|
var signUpHeaderId = 'signup-header';
|
|
12210
12233
|
var signUpInstructionsId = 'sign-up-instructions';
|
|
12211
12234
|
var isMobile = useMobile();
|
|
12235
|
+
var _useState = useState(false),
|
|
12236
|
+
isSuccess = _useState[0],
|
|
12237
|
+
setIsSuccess = _useState[1];
|
|
12212
12238
|
var _useState2 = useState(false),
|
|
12213
|
-
|
|
12214
|
-
|
|
12215
|
-
var _useState3 = useState(false),
|
|
12216
|
-
dropdownOpen = _useState3[0],
|
|
12217
|
-
setDropdownOpen = _useState3[1];
|
|
12239
|
+
dropdownOpen = _useState2[0],
|
|
12240
|
+
setDropdownOpen = _useState2[1];
|
|
12218
12241
|
var successRef = useRef(null);
|
|
12219
|
-
var
|
|
12242
|
+
var _useState3 = useState({
|
|
12220
12243
|
firstName: '',
|
|
12221
12244
|
lastName: '',
|
|
12222
12245
|
email: ''
|
|
12223
12246
|
}),
|
|
12224
|
-
formValues =
|
|
12225
|
-
setFormValues =
|
|
12247
|
+
formValues = _useState3[0],
|
|
12248
|
+
setFormValues = _useState3[1];
|
|
12226
12249
|
useEffect(function () {
|
|
12227
12250
|
if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
|
|
12228
12251
|
successRef.current.scrollIntoView({
|